```javascript
new Vue({
i18n,
router,
store,
render: h => h(App),
data: {
// 空的实例放到根组件下,所有的子组件都能调用
Bus: new Vue()
}
}).$mount('#app');
子组件删除列表数据的时候,需要通知父组件更新左侧的树结构数据
```javascript
methods:{
handleDelete(){
.....
this.$root.Bus.$emit('fetchTreeData');
}
}
父组件在mounted钩子函数中监听
mounted() {
this.$root.Bus.$on('fetchTreeData', () => {
this.fetchItemTree(this.activeTreeName);//父组件处理的逻辑代码
});
}
本文介绍了一种在Vue项目中实现子组件与父组件通信的方法,通过在根实例下创建一个空的Vue实例作为事件总线,子组件可以通过这个事件总线触发事件,父组件则在mounted钩子中监听这些事件,从而实现数据的更新和同步。
729

被折叠的 条评论
为什么被折叠?



