vue2 基础学习05 （Vue组件：非父子组件之间的通信）

---

前言

我将要实现的是：点击按钮，将组件2中的数据传递给组件1，在组件1中展示。

源代码

可以直接复制执行

演示

---

总结步骤

• 创建一个空实例（bus中央事件总线也可以叫中间组件）

• 利用$emit $on的触发和监听事件实现非父子组件的通信

  Vue.prototype.$bus=new Vue()//在vue上面挂载一个$bus作为中央处理组件
  this.$bus.$emit('自定义事件名','传递的数据')//触发自定义事件传递数据
  this.$bus.$on('自定义事件名'，fn)//监听自定义事件获取数据

从网上了解到，解决的方案还有 vuex、 provide/inject是解决同根往下派发、本地存储也可以进行非父子组件之间的通信

这块暂时没学到，待学习。