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

[無邊框]

3006

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