Vue全局事件总线你了解吗

当进行 Vue 项目开发时，有时需要在组件之间进行通信，常见的方式有props、自定义事件、Vuex等。除了这些方式，还可以使用Vue的全局事件总线来实现组件之间的通信。

什么是Vue全局事件总线？

Vue全局事件总线是通过Vue实例来实现的全局事件总线。Vue实例是一个事件代理，它中转和分发事件通知，从而实现各组件之间的通信。它的实现是通过创建一个Vue实例来实现：

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

上面的代码中，我们创建了一个Vue的实例，并将其导出。这个实例用于事件监听和分发，我们可以在组件中引入它来实现组件之间的通信。

如何使用Vue全局事件总线？

使用Vue全局事件总线需要以下两步：

1. 组件传递事件：在触发事件的组件中，使用$emit方法，向全局事件总线发送事件。

// component1.vue
<template>
  <div>
    <button @click="sendMessage">向另一个组件发送信息</button>
  </div>
</template>
<script>
import EventBus from './event-bus'
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello, I am Component1.');
    }
  }
}
</script>

1. 组件接收事件：在监听事件的组件中，使用$on方法，监听全局事件总线中的事件。

// component2.vue
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
import EventBus from './event-bus'
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    EventBus.$on('message', (msg) => {
      this.message = msg;
    });
  }
}
</script>

上述代码中，在触发事件的组件component1.vue中，我们向全局事件总线中发送了一个“message”事件，并携带了“Hello, I am Component1.”的信息。在监听事件的组件component2.vue中，我们通过$on方法监听了“message”事件，并在事件回调中更新了message参数值。这样，当我们在component1.vue组件中点击发送信息按钮后，component2.vue组件中的p标签就会显示“Hello, I am Component1.”的信息。

示例1：结合vue-router使用Vue全局事件总线

我们在项目中经常会使用vue-router进行页面的跳转。那么，如何才能在不同的页面之间传递数据呢？

我们可以将全局事件的实现放在路由配置文件中，这样就能够在任何组件中使用它了。

// router.js
import Vue from 'vue';
import Router from 'vue-router';
import EventBus from './event-bus';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About,
      beforeEnter(to, from, next) {
        EventBus.$emit('navigateTo', to.name);
        next();
      }
    }
  ]
});

在上述代码中，我们使用了beforeEnter导航守卫函数，可以在路由切换前触发，所以可以通过它来触发事件。在该函数中，我们向全局事件总线中发送了一个“navigateTo”事件，并携带了to.name的字符串值。

在监听“navigateTo”事件的组件中，我们只需要在mounted钩子函数中注册监听事件即可：

// component.vue
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
import EventBus from './event-bus'
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    EventBus.$on('navigateTo', (routeName) => {
      this.message = `跳转到了名称为${routeName}的路由`;
    });
  }
}
</script>

在上述代码中，我们在监听“navigateTo”事件的组件中获取到了传递过来的routeName参数，并将其显示在页面上。

示例2：在子组件中使用全局事件总线

在某些情况下，我们需要在子组件中实现跨级组件的通信。例如，在一个组件中有一个子组件，我们要在子组件中实现向父组件发送事件的情况，这时候可以使用全局事件总线。

// parent.vue
<template>
  <div @click="changeCount">
    <child></child>
  </div>
</template>
<script>
import Child from './child.vue'
import EventBus from './event-bus';
export default {
  name: "Parent",
  components: {Child},
  data() {
    return {
      count: 0
    }
  },
  methods: {
    changeCount() {
      this.count++;
      EventBus.$emit('countChange', this.count);
    }
  }
}
</script>

在上述代码中，我们在父组件parent.vue中定义了一个数据count和一个方法changeCount。在changeCount方法中，我们先将count的值加一，然后向全局事件总线中发送了一个“countChange”事件，并将count参数值一起传递出去。

在子组件child.vue中，我们只需要在mounted钩子函数中注册监听“countChange”事件就可以获取到组件之间传递的参数了。

// child.vue
<template>
  <div>
    <p>父组件中count的值为{{ count }}</p>
  </div>
</template>
<script>
import EventBus from './event-bus';
export default {
  name: "Child",
  data() {
    return {
      count: -1
    }
  },
  mounted() {
    EventBus.$on('countChange', (count) => {
      this.count = count;
    });
  }
}
</script>

在上述代码中，我们在子组件child.vue中定义了一个数据count， 并在mounted钩子函数中注册监听“countChange”事件。当我们在父组件中调用changeCount方法时，就会通过事件总线将参数传递给子组件，从而实现了子组件获取父组件数据的效果。

以上就是使用Vue全局事件总线实现组件通信的完整攻略，希望能对你有所帮助。