Vue 子组件的 updated 事件触发后,为什么父组件的 updated 事件不触发呢?

假设现在子组件只是一个按钮,按钮点击后会改变子组件的 data 数据。

为什么这样子操作只会触发子组件的 updated 而不会触发父组件的 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");
    }
})


阅读 7.3k
2 个回答

父组件要监听子组件的事件发生可以使用emit和on进行,子组件必须要触发事件,然后父组件才可以接收到。
子组件:

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

methods: {
    add () {
       this.$emit('changeHi', this.hi.a) //触发changeHi这个自定义方法,'this.hi.a'为向父组件传递的数据
    }
}

父组件

<abc @changeHi="changeHi"></abc> //监听子组件触发的changeHi事件,然后调用changeHi方法

methods: {
    changeHi(a) { // a为子组件传过来的数据
        a = a + "1";
    }
}

当然,还可以使用vuex进行数据传输,但使用vuex一般是中大型项目,小型项目的话就自定义事件进行父子组件传输,兄弟组件的数据传输的话可以使用event bus 或者是vue-event-proxy这个插件

你改变子组件的数据是不会触发父组件的钩子的。Vue中的通信是单向的,父组件可以通过props来向子组件传递信息,也就是说子组件可以知道父组件的状态变化,而子组件的状态变化父组件是不知道的。
如果你想让子组件向父组件发送信息,可以通过onemit来指定和触发自定义事件来进行通信,或者也可以用vuex来实现这个功能。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题