[精讚] [會員登入]
2503

vue.js component 在parent與child 傳值

component 在parent與child 傳值

分享此文連結 //n.sfs.tw/11430

分享連結 vue.js component 在parent與child 傳值@igogo
(文章歡迎轉載,務必尊重版權註明連結來源)
2019-10-24 13:59:01 最後編修
2017-07-11 18:26:51 By igogo
 

 

https://vuejs.org/v2/guide/components.html

components 間怎麼溝通呢? 通常以parent-child 的闗係來傳值

props down, events up.

 

 var app = new Vue({

        el: '#app',
        data: {
            currentView: 'initView',
            item: {}
        },
        methods: {
            updateItem: function(obj) {
                this.item = obj;
                console.log(this.item);
            }
        }
    })

parent裡有一個item的obj 利用props 傳到child component

 Vue.component('initView', {
        props: ['item'],
        template: '#initView',
        data: function() {
            return {
                url: /*[[${url}]]*/                 
            }
        },
        methods: {
            getData: function() {
                console.log(this.url);
                let vm = this;
                this.$http.get(this.url).then((response) => {
                    // success callback
                    console.log(response.data.obj);
                    let obj = response.data.obj;
                    vm.$emit('get-data', obj);

                }, (response) => {
                    // error callback
                });

            }

        }
    });

child component 在跟api 取得值後利用emit 傳回parent  更新item

由getData 傳到parent的updateItem

<component :is="currentView" :item="item" v-on:get-data="updateItem">
</component>

 

getData 在HTML裡必須寫成get-data  詳見以下

https://vuejs.org/v2/guide/components.html

HTML attributes are case-insensitive, so when using non-string templates, camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents:

或是改用   string templates

 

 

<body> 
<div class="container" id="app">
        <component :is="currentView" :item="item" v-on:get-data="updateItem">
        </component>
      
</div>
    <template id="initView">
        <div>

            <p>
                {{item}}
            </p>
            <div class="btn-group">
                <button type="button" class="btn btn-success" @click="getData">讀取API</button>
            </div>
        </div>
    </template>
 <script th:inline="javascript">
    Vue.prototype.$http = axios;

    Vue.component('initView', {
        props: ['item'],
        template: '#initView',
        data: function() {
            return {
                url: /*[[${url}]]*/                 
            }
        },
        methods: {
            getData: function() {
                console.log(this.url);
                let vm=this;
                this.$http.get(this.url).then((response) => {
                    // success callback
                    console.log(response.data.obj);
                
                    let obj = response.data.obj;
                    vm.$emit('get-data', obj);

                    // this.showModal = true;
                }, (response) => {
                    // error callback
                });

            }

        }
    });


    var app = new Vue({

        el: '#app',
        data: {
            currentView: 'initView',
            item: {}
        },
        methods: {
            updateItem: function(obj) {
                this.item = obj;
                console.log(this.item);
            }
        }
    })
    </script>
</body>

 

END

你可能感興趣的文章

[javascript] 將角色物件放到清單中,並依序讀出每個角色的X值 參考在scratch中建立三個角色並且給定值 http://n.sfs.tw/content/index/14716 一

題庫批次匯入google表單 請先建一新試算表, 將題目轉成格式如下 並將網址列記下來, 後續的題目就是從此試算表讀出 題目 答案 選項一 選項二 選

word題目轉google測驗 word題目轉google測驗

vue.js component 在parent與child 傳值 component 在parent與child 傳值

vue.js modal 作兩個選項按鈕並導向不同頁面 vue.js modal 作兩個選項按鈕

將google試算表當作簡易資料庫,利用Google apps cript 在網頁上操作查詢 將google試算表當作簡易資料庫,利用apps cript 在網頁上操作查詢 若我有一試算表資料 縣市 status

我有話要說

>>

限制:留言最高字數1000字。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

vue.js modal 作兩個選項按鈕並導向不同頁面 vue.js modal 作兩個選項按鈕

apache 反向代理 80轉443轉8080 apache, proxy pass

python 的RE python re

java.time 時間 instant java.time

Arrays.asList 後想再add出現 UnsupportedOperationException 這個問題真是搞死我了 List<String> fruits = Arrays.asList("a