Vue2事件总线（Event Bus）：实现组件间的跨组件通

介绍

在Vue应用中，组件通信是一个常见的需求。有时，我们需要在不同级别的组件之间进行数据传递或事件触发，而不希望每个组件都知道其他组件的存在。这时，事件总线就派上用场了。

事件总线是一种用于实现组件间跨级通信的机制。它允许我们在Vue应用中创建一个全局的事件中心，组件可以通过该事件中心来发送和接收事件，实现数据的传递和共享。使用事件总线，我们可以实现组件间的松耦合通信，提高代码的可维护性和可扩展性。

实现事件总线

在Vue应用中实现事件总线非常简单。我们可以利用Vue实例的原型链，在根实例中创建一个事件总线，并使其成为全局可访问的。下面是一个示例，演示了如何在Vue应用中创建事件总线：

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus = this;
  }
}).$mount('#app')

在上述示例中，我们在beforeCreate钩子函数中，将Vue实例赋值给Vue.prototype.$bus，使其成为全局可访问的事件总线。

使用事件总线进行跨级通信

一旦我们在Vue应用中创建了事件总线，组件就可以使用它来发送和接收事件了。下面是一个示例，展示了如何在两个组件之间进行跨级通信：

<!-- A.vue -->
<template>
    <div>
        A <input v-model="msg" /> <button @click="sendData">传递</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg: ""
        }
    },
    methods: {
        sendData() {
            this.$bus.$emit('update', this.msg)
        }
    }
};
</script>

<!-- B.vue -->
<template>
    <div>
        B: {{ message }}
    </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods:{
    update(msg){
        this.message = msg
    }
  },
  mounted(){
    this.$bus.$on('update',this.update)
  },
}
</script>

在上述示例中，组件A.vue包含一个输入框和一个按钮。当按钮被点击时，使用this.$bus.$emit方法触发了名为update的事件，并将输入框中的数据作为参数传递。

组件B.vue定义了一个message属性，用于接收来自事件总线的数据。在组件的mounted钩子函数中，使用this.$bus.$on方法监听名为update的事件，并将接收到的数据传递给update方法进行更新。

通过这种方式，当在组件A.vue中输入数据并点击按钮时，数据将通过事件总线传递给组件B.vue，并在页面中显示出来。

总结

Vue事件总线是一种强大而灵活的机制，可用于实现组件间的跨级通信。通过在根实例中创建事件总线，我们可以在组件中自由地触发和监听事件，实现数据的传递和共享。

本篇博客介绍了事件总线的概念和用法，并提供了一个简单的案例代码。通过掌握事件总线的原理和使用方式，我们能够更好地组织和管理Vue应用中的组件通信，提高代码的可维护性和可扩展性。