假设现在子组件只是一个按钮,按钮点击后会改变子组件的 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");
}
})
父组件要监听子组件的事件发生可以使用emit和on进行,子组件必须要触发事件,然后父组件才可以接收到。
子组件:
父组件
当然,还可以使用vuex进行数据传输,但使用vuex一般是中大型项目,小型项目的话就自定义事件进行父子组件传输,兄弟组件的数据传输的话可以使用event bus 或者是vue-event-proxy这个插件