vue中使用$bus

最近在看他人vue项目中发现别人使用了$bus,感觉使用很方便

查了查，bus主要是解决无关系组件之间的交互问题，当然父子组件我们可以通过自定义事件来交互（子传父）

另外一种解决无关系组件间的交互问题就是使用vuex，也很方便。

那么bus最主要的是无关系组件间的交互响应，相当于父子组件的自定义事件

那么bus应该如何在项目中使用

首先在vue实例上绑定一个bus实例（其实就是一个全新的vue实例，此实例拥有vue的全部方法）例子：

main.js

Vue.prototype.$bus = new Vue() // event Bus 用于无关系组件间的通信。

在组件中就可以这样使用

假设有两个不相关的a，b组件

b.vue中

mounted() {
    this.$bus.$on('isCalled', this.isCalled)
    this.$bus.$on('missCall', this.missCall)
    this.$bus.$on('isRefused', this.isRefused)
    this.$bus.$on('isAccept', this.isAccept)
    this.$bus.$on('isHungUp', this.isHungUp)
    this.$bus.$on('busy', this.busy)
    this.$bus.$on('video-call', this.videoCall)
  },

a.vue中

handleEvent(messageList) {
      if (xxxx) {
        this.$bus.$emit('isCalled')
      }
      if (xxx) {
        this.$bus.$emit('missCall')
      }
      if (xxx) {
        this.$bus.$emit('isRefused')
      }
      if (xxx) {
        this.$bus.$emit('missCall')
      }
      if (xxx) {
        this.$bus.$emit('isAccept')
      }
      if (xxx) {
        this.$bus.$emit('isHungUp')
      }
      if (xxx) {
        this.$bus.$emit('isRefused')
      }
      if (xxx) {
        this.$bus.$emit('isRefused')
      }
    },

 

vue中$emit与$on

 

　　var Event = new Vue();　　　　　　相当于又new了一个vue实例，Event中含有vue的全部方法；

　　Event.$emit('msg',this.msg);　　　   发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，第二个参数是这个数据现在的位置；

　　Event.$on('msg',function(msg){　　接收数据，第一个参数是数据的名字，与发送时的名字对应，第二个参数是一个方法，要对数据的操作

　　　　/这里是对数据的操作

　　})

 

 

 

。