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

---

• 前言

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

  image

• 源代码

  body里面的html和js代码

  style样式

   .componentOne {
          background-color: greenyellow;
          border: 1px solid green;
          width: 250px;
          height: 80px;
          margin-left: 20px
      }
  
      .componentTwo {
          background-color: lightgray;
          border: 1px solid green;
          width: 250px;
          height: 80px;
          margin-left: 20px
      }
  

• 演示

  image

---

• 总结步骤

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

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

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

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

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