Vue.js 事件总线

在Vue.js中，您可以使用**事件总线(Event Bus)**来跨组件通信。事件总线是Vue.js提供的一种通信方式，该通信方式可帮助多个组件之间进行通信而不需要依赖嵌套关系。

安装

安装Vue.js事件总线非常简单，只需要在Vue实例上挂载一个新的Vue实例即可：

const eventBus = new Vue()

然后，您可以使用eventBus实例来触发和监听事件。为了使事件总线更易于使用，建议将其放在Vue实例之外的单独的JS文件中。

触发事件

要在基于Vue.js的任何组件中触发事件，请使用eventBus.$emit(eventName, eventData) 方法。'eventName'是要发射的事件名称，'eventData' 是可选的自定义参数。示例如下：

eventBus.$emit('foo', 'bar')

上述代码将会发送名为'foo'的事件，并在它的回调函数中使用 'bar' 参数。

监听事件

要在基于Vue.js的任何组件中监听事件，请使用 eventBus.$on(eventName, eventHandler)方法。'eventName'是要监听的事件名称，'eventHandler' 是回调函数，而且当事件触发时将被调用。示例如下：

eventBus.$on('foo', event => {
  console.log(event)  // 'bar'
})

上述代码将会监听名为'foo'的事件，当事件触发时将会调用匿名的回调函数。

取消监听事件

要取消事件监听，请使用 eventBus.$off(eventName)方法。’eventName' 是事件名称。如果不传递任何参数，那么所有监听器都将被删除。示例如下：

eventBus.$off('foo')

上述代码将会移除名为'foo'的事件的所有监听器。

示例

// event-bus.js
import Vue from 'vue'
export const eventBus = new Vue()

// component-one.vue
<template>
  <div>
    <button @click="onClickHandler">点击我！</button>
  </div>
</template>

<script>
  import { eventBus } from './event-bus.js'
  export default {
    methods: {
      onClickHandler() {
        eventBus.$emit('clicked')
      }
    }
  }
</script>

// component-two.vue
<template>
  <div>
    <p>已点击 {{ count }} 次</p>
  </div>
</template>

<script>
  import { eventBus } from './event-bus.js'
  export default {
    data() {
      return {
        count: 0
      }
    },
    created() {
      eventBus.$on('clicked', () => {
        this.count++
      })
    }
  }
</script>

上述示例中，当用户点击 'component-one.vue' 中的按钮时，'component-two.vue' 中的计数器将会增加。我们使用'event bus' 将这两个组件连接在一起。注：此示例中，我们通过导入“event-bus.js”文件来使用事件总线。

结论

事件总线是Vue.js中一个简单却非常强大的功能。使用事件总线，您可以将处理多个组件行为的“业务逻辑”从底层组件中抽离，以简化代码。同时，您也可以创建一个可信赖的应用程序维护，以及让您的程序更容易开发和调试。