对于兄弟组件和父子组件的通信想必大家已经很了解了。然而,如果是跨多层父子组件通信的话,甚至两个组件的的关系相差很远,通信起来就不去很方便了,官方推荐使用Vuex来处理这些复杂情况,但在小项目中焉用牛刀。
我们可以中一个空的Vue实例做为集中式的事件中间件。Vue官方解释文档
只需要三步就可以实现两个毫无关系的组件间的通信。我通常将其命名为bus组件
- 创建一个bus.js
import Vue from "vue";
export default new Vue();
- 在发出信息的组件中
import bus from "../../../../static/js/bus";
mounted() {
bus.$emit('msg','message')
}
- 在接受信息的组件中
import bus from "../../../../static/js/bus";
mounted() {
bus.$on('msg',data => {
console.log('bus',data)
})
}
🔔🔔裆裆,这样就实现了。
of course也可以把他绑到Vue.prototype里面,做为插件使用