[精讚] [會員登入]
2611

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

你可能感興趣的文章

vue.js components 多個組件的呈現 vue.js 組件 component

javascript 陣列 javascript 陣列可以放各种型別的元素 let data = [1,2,"john",tru

[vue.js] input event Form-Input-Components-using-Custom-Events

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

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

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

我有話要說

>>

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

訪客留言

[無留言]

隨機好文

vim 特定範圍行數開頭加上# 註解 vim 特定範圍行數開頭加上# 註解

雲端校務系統與OPENLDAP帳號整合(2) openldap,雲端校務

tc web 問與答 Q. 填報網址 A. https://tiny.cc/tc-web Q. 出現了以下畫面, 怎麼辦 A. 建議瀏覽器開無