鍍金池/ 問答/HTML/ Vue 子組件的 updated 事件觸發(fā)后，為什么父組件的 updated 事

Vue 子組件的 updated 事件觸發(fā)后，為什么父組件的 updated 事件不觸發(fā)呢？

假設(shè)現(xiàn)在子組件只是一個按鈕，按鈕點擊后會改變子組件的 data 數(shù)據(jù)。

為什么這樣子操作只會觸發(fā)子組件的 updated 而不會觸發(fā)父組件的 updated 呢？

有沒有什么方法是不修改子組件的情況下，在父組件捕獲子組件的這種更新呢？

<div id="app">
  <abc></abc>
</div>
Vue.component("abc",{
    name:"abc",
    template:`<div @click="add()">{{hi.a}}</div>`,
    data(){
        return{
            hi:{a:"1"}
        }
    },
    methods:{
        add(){
            this.hi.a = this.hi.a + "1";
        }
    },
    updated(){
        console.log("com-updated");
    }
});

new Vue({
  el: '#app',
    updated(){
        console.log("updated");
    }
})
回答
編輯回答
祉小皓

你改變子組件的數(shù)據(jù)是不會觸發(fā)父組件的鉤子的。Vue中的通信是單向的，父組件可以通過props來向子組件傳遞信息，也就是說子組件可以知道父組件的狀態(tài)變化，而子組件的狀態(tài)變化父組件是不知道的。
如果你想讓子組件向父組件發(fā)送信息，可以通過on和emit來指定和觸發(fā)自定義事件來進(jìn)行通信,或者也可以用vuex來實現(xiàn)這個功能。

2018年1月5日 21:51
編輯回答
笨小蛋

父組件要監(jiān)聽子組件的事件發(fā)生可以使用emit和on進(jìn)行，子組件必須要觸發(fā)事件，然后父組件才可以接收到。
子組件：

<div @click="add">{{hi.a}}</div>

methods: {
    add () {
       this.$emit('changeHi', this.hi.a) //觸發(fā)changeHi這個自定義方法，'this.hi.a'為向父組件傳遞的數(shù)據(jù)
    }
}

父組件

<abc @changeHi="changeHi"></abc> //監(jiān)聽子組件觸發(fā)的changeHi事件,然后調(diào)用changeHi方法

methods: {
    changeHi(a) { // a為子組件傳過來的數(shù)據(jù)
        a = a + "1";
    }
}

當(dāng)然，還可以使用vuex進(jìn)行數(shù)據(jù)傳輸，但使用vuex一般是中大型項目，小型項目的話就自定義事件進(jìn)行父子組件傳輸，兄弟組件的數(shù)據(jù)傳輸?shù)脑捒梢允褂胑vent bus 或者是vue-event-proxy這個插件

2017年11月13日 10:03