Vue中使用事件总线Bus实现组件之间的通信
new Vue({ i18n, router, store, render: h => h(App), data: { // 空的实例放到根组件下,所有的子组件都能调用 Bus: new Vue() } }).$mount('#app');
子组件删除列表数据的时候,需要通知父组件更新左侧的树结构数据
methods:{ handleDelete(){ ..... this.$root.Bus.$emit('fetchTreeData'); } }
父组件在mounted钩子函数中监听
mounted() { this.$root.Bus.$on('fetchTreeData', () => { this.fetchItemTree(this.activeTreeName);//父组件处理的逻辑代码 }); }
代码搬运工