vue2.5父子组件和非父子组件间的通信

1、父子组件通信

查看官方文档中关于父子组件的相互通信，其推荐的是父组件中使用 v-on监听子组件上 $emit 的变化。这个我亲自试过没有问题，有兴趣的同学可以尝试下

2、非父子组件通信

但是假如是非父子组件之间的通信呢？官方的说明是这样的

然而，如果是跨多层父子组件通信的话，$emit 并没有什么用。相反，用集中式的事件中间件可以做到简单的升级。这会让组件之间的通信非常顺利，即使是兄弟组件。因为 Vue 通过事件发射器接口执行实例，实际上你可以使用一个空的 Vue 实例。

具体调用官网也贴出了代码
其主要的核心步骤是：

// 将在各处使用该事件中心
// 组件通过它来通信
var eventHub = new Vue()

//在组件A中触发something
methods: {
  todo: function () {
    eventHub.$emit('something', 'args')
  }
}

//在组件B被创建的时候使用$on监听something，并传入执行函数
created: function () {
  eventHub.$on('something', this.doSomthing)
},
// 组件销毁前清除事件监听
beforeDestroy: function () {
  eventHub.$off('something', this.doSomthing)
},
//在组件的方法中定义执行函数
methods: {
  doSomthing: function (args) {
    //todo something
  }
}

相信很多同学跟我一样看到这段代码之后，马上就开始撸代码，试验下消息是否能通。但是实际项目中，我这样使用，程序缺一直报错”eventHub is not defined”，那么这个到底是什么原因呢？

首先官网贴出的代码只是一种思路，实际写法需要根据你的项目结构做出调整。官网的写法之所以能够有效，是因为其默认的是组件A和组件B都能访问我们定义的eventHub。但是在实际项目中，我们组件A和组件B都是各自独立的组件，其作用域是不同的，根本访问不了我们在main.js中定义的eventHub。所以需要进行如下的调整：

第一步：在vue2.5中在初始化根Vue之前，给data添加一个 名字为eventhub 的空vue对象

new Vue({
  el: '#app',
  router,
  data: {
    eventHub: new Vue()
  },
  render: h => h(App)
})

第二步：在各组件中使用vue的实例属性$root来访问我们当前组件树的根 Vue 实例，并使用vm.$root.eventHub来访问我们定义的事件发射器eventHub

//在组件A中 使用this.$root.eventHub.$emit来触发事件
methods: {
    addCart(event) {
      this.$root.eventHub.$emit('something', 'args')
    }
}

//在组件B中 使用this.$root.eventHub.$on来监听事件
created() {
    this.$root.eventHub.$on('something', this.todo)
  },
  beforeDestroy: function() {
    this.$root.eventHub.$off('something', this.todo)
  },
  methods: {
    todo(args) {
     // do something
    }
  }

这样之后，非父子组件的通信就完成了。

官方对于非父子组件通信也推荐了一个专用的状态管理层：Vuex。

待续。。。