浅谈vue中$bus的使用和涉及到的问题

本文将为大家详细讲解“浅谈vue中$bus的使用和涉及到的问题”。

1. 什么是$bus

在 Vue.js 的事件机制中，存在一种很特殊的事件派发 / 监听模式，即使用 $on 和 $emit 方法的全局事件总线。这种模式是基于一个空的 Vue 实例作为中央事件总线的模式。

这种空的 Vue 实例被称为 $bus，$bus 实例可以被用来作为组件间传输数据的桥梁。通过 $emit 触发 $bus 中定义的事件，再通过 $on 来监听相同的事件，实现跨组件通信，达到解耦的目的。

2. 怎么使用$bus

2.1 注册事件和触发事件

通过以下代码获取 $bus 实例：

const EventBus = new Vue();

然后在需要通信的组件上的生命周期钩子方法（如 created、mounted）中注册事件：

mounted: function () {
  EventBus.$on('changeTitle', this.changeTitleFunc);
},
methods: {
  changeTitleFunc: function (title) {
    this.title = title;
  }
}

在需要向其他组件传输数据时，只需要触发相应的事件及传入事件的参数值，例如：

EventBus.$emit('changeTitle', 'new title');

2.2 销毁事件

为了避免内存泄漏和不必要的事件触发，建议在组件销毁前取消对事件的监听，如以下代码所示：

beforeDestroy: function () {
  EventBus.$off();
}

3. $bus的问题

虽然 $bus 可以帮助我们解耦组件之间的关系，但是滥用 $bus 也会引起诸多问题：

组件之间的耦合度可能增加，增加调试难度。
跨多层级组件通信时，事件名称给定可能会出现命名冲突。
多个组件注册同一事件可能会造成一个事件被重复执行多次。

因此，使用 $bus 需要适量，而非无限制的添加。需要有一个良好的组件架构设计和合理的通信设计，才能充分使用 $bus 这种模式的优势，减少它带来的副作用。

4. 示例说明

以下为两个组件之间使用 $bus 进行通信的示例说明。

4.1 父子组件间传递数据

独立的子组件可以通过 $bus 与父级组件通信，以下为父组件代码：

<template>
  <div>
    <div>{{ value }}</div>
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  name: 'ParentComponent',
  data () {
    return {
      value: ''
    }
  },
  components: {
    ChildComponent
  },
  mounted () {
    EventBus.$on('emitFromChild', value => {
      this.value = value
    })
  }
}
</script>

以下为子组件代码：

<template>
    <div>
        <input type="text" v-model="value">
        <button @click="sendValue">发送</button>
    </div>
</template>
<script>
export default {
  name: 'ChildComponent',
  data () {
    return {
      value: ''
    }
  },
  mounted () {
    EventBus.$emit('emitFromChild', this.value)
  },
  methods: {
    sendValue () {
      EventBus.$emit('emitFromChild', this.value)
    }
  }
}
</script>

在子组件挂载时，就会将数据传递给父组件，父组件注册事件接收数据，渲染展示到页面中。

4.2 多个组件之间的通信

多个组件之间可以通过 $bus 通信，以下为组件1代码：

<template>
  <button @click="emitEvent">触发事件</button>
</template>
<script>
export default {
  name: 'Component1',
  methods: {
    emitEvent () {
      EventBus.$emit('event', 'msg from Component1')
    }
  }
}
</script>

以下为组件2代码：

<template>
  <div>{{ value }}</div>
</template>
<script>
export default {
  name: 'Component2',
  data () {
    return {
      value: ''
    }
  },
  mounted () {
    EventBus.$on('event', msg => {
      this.value = msg
    })
  }
}
</script>

当组件1触发事件时，组件2会收到相应的数据，渲染展示到页面中。