問題描述

組件：<test :loading.sync="loading"></test>

Vue.component('test',{ template: '#testText', props: { loading: { type: Boolean, default: false} }, methods: {getData: function (data) { this.loading = false;//此句有錯誤，該如何更正} }});new Vue({el: '#indexBox',data: { loading : false},methods : {loadMore: function () { this.loading = true;} } });

我想在子組件里面變更loading的值回傳給父組件，請問該如何控制loading

問題解答

你用的是vue2吧，如果是vue2的話就應(yīng)該用事件來把子組件的狀態(tài)傳給父組件，有兩種辦法，一種是在父組件中傳一個v-model='outerLoading'，然后子組件里面

watch:{ outerLoading (v) {this.innerLoading = v }, innerLoading (v) {this.emit('input', v) }}

這樣outLoading就會響應(yīng)innerLoading，實(shí)現(xiàn)雙向綁定的功能。還有一種做法和這個類似，就是把this.emit('input', v)換成this.emit('eventName', v),然后在父組件中@eventName='eventFunc', 再通過父組件中的eventFunc(v) { //code... }來響應(yīng)子組件的狀態(tài)