本文介绍了Vue非父子组件间通信的一种方式——使用Bus（中央事件总线）实现。通过创建一个空的Vue实例作为中介，组件可以发送和接收消息，避免直接通信。文章详细阐述了Bus的使用步骤，包括在组件的`created`生命周期中监听事件，`destroyed`中移除监听，以及如何发布和接收消息。文中提供了具体的demo代码示例，强调在复杂项目中可能需要考虑使用Vuex进行状态管理。
我的上一篇关于vue组件通信的文章链接戳这里 => vue组件通信，点击传值，动态传值（父传子，子传父）
今天要说的是非父子通信方式，这种跨组件的通信方式，可以通过Bus的形式进行处理。在Vue 2.x 推荐使用 个空的 Vue 实例作为中央 件总线（ bus ），也就是 相当于一个中介。
比如你需要租房子 你可能会找房产中介来登记你的需求 然后中介把你的信息发给满足要求的出租者，出租者再 价和看房时间告知中介，由中介再转达给你，整个过程中 买家和卖家并没有任何交流，都是通过中间人来传话的，或者你最近可能要换房了，你会找房产中介登记你的信息订阅与你找房需求相关的资讯， 旦有符合你 房子出现时，中介会通知 ，并传达你房子 具体信息
下面的例子中你和出租者担任的就是两个跨级的组件，而房产中介就是这个中央事件总线 bus
主要传递方式大概就是下面这几步：
- 通过 Bus.$emit('on-message',this.abc) 的方式进行发布消息，他有两个参数，一个是消息声明，第二个是传递的值，key和value的关系
-
另一个组件接收通过 Bus.$on('on-message', msg => { }）的方式，第一个参数是传递过来的消息声明，第二个参数可以是个函数，msg就是做为传递过来的参数
-
这里有个坑
最低0.47元/天 解锁文章
扫一扫
941
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
