Vue中事件总线简单实现

一些简单的状态管理我们可以通过事件总线来实现

       非父子组件中的通信我们可以通过事件总线进行通信，事件总线与Vuex一样可以实现状态管理，但是注意的是，一般使用事件总线通信都是对一些简单的状态进行控制，而对于比较复杂的状态控制，比如登录状态，全局变量等，建议使用Vuex仓库，不过，事件总线在简单的状态控制还是比较常见的。那么，我们如何用事件总线实现非父子组件1与父子组件2之间的通信呢。
1. 先在main.js中创建Vue对象并赋给$EventBus实例，代码如下

Vue.prototype.$EventBus=new Vue()

2. .父子组件1（事件发出端）–使用$emit发出事件

  methods:{
    navback(){
      this.$EventBus.$emit('事件名字'，参数)
    }
  }

3. 非父子组件2（事件接受端）----使用$on接受事件

  mounted() {
    this.$EventBus.$on(
      "事件名字",
      function(参数) {
         操作
      }.bind(this)
    );
  },

父子组件间的通信就这么简单啦，你是否学会了呢