Vue3 - 事件 API 新标准（如何在 Vue3 中怎么用事件总线实现兄弟组件通信？相比 Vue2 有什么不同？）

前言

对比 Vue2 ，引出并展开 Vue3 。

本文讲述了事件 API 在 Vue3 中相比 Vue2 有什么变化，以及使用方法和代码示例详细讲解。

回忆 Vue2

大家在写 Vue2 项目时，兄弟组件之间传参，我相信很大一部分开发者都会借助全局的事件总线，在外部定义一个总线（eventBus），利用这个总线来实现两个兄弟组件的传参，而且不需要涉及父组件。

我们来回顾一下 Vue2 这种方式如何实现的。

首先，我们会在组件之外定义一个全新 Vue 实例作为组件间通信的 桥梁，只有这样才能让两个毫无关联的组件建立关联。

bug.js：

import Vue from 'vue'
export default new Vue()

A 组件：

<template>
  <div>
      <h1>A.vueh1>
      <button @click="send()">向B组件发送消息button>
  div>
template>

<script>
// 引入 "桥梁"
import Bus from '@/assets/bus.js'
export default {
  methods: {
      // 跟普通的$emit一样,只不过是给到了Bus桥梁上
      send() {
        Bus.$emit('msg', "你好,我是A.vue 传递过来的数据!")
      }
  },
  
  // 销毁事件
  beforeDestroy () {Bus.$off('msg') },
}
script>

B 组件：

<template>
  <div>
      <h1>B.vueh1>
      <p>{{ msg }}p>
  div>
template>

<script>
// 引入 "桥梁"
import Bus from '@/assets/bus.js'
export default {
    data() {
        return {
        	// 展示通信数据
            msg: '...'
        }
    },
    
    // 订阅消息
    mounted() {
    	// 监听事件触发
        Bus.$on('msg', msg => {  
            // console.log("A.vue组件收到bus消息：", msg); 
            this.msg = msg// 赋值展示
        })
    }
}
script>

找个页面，把两个组件引过来：

<template>
  <div>
      <A />
      <B />
  div>
template>

<script>
import A from '@/components/A.vue'
import B from '@/components/B.vue'
export default {
  components: { A, B }
}
script>

结果：

可以看到，大部分开发者会以为这种实现方式似乎已经很完美了。你看，它不与父组件关联，也不需要太多的逻辑，很好啊！

但是，我需要给这些开发者破瓢冷水，Vue 官方这样说的，它说在绝大多数情况下，不鼓励开发者使用全局的事件总线在组件之间进行通信。虽然在短期内往往是最简单的解决方案，但从长期来看，它维护起来总是令人头疼。

那么问题来了，你不建议用了，那我们兄弟组件怎么传参啊？难不成两兄弟一拍两散！

切入 Vue3

在 Vue3 中，因为已经移除掉了实例上 $on / $off / $once 方法，所以你想借助这些 API 从一个组件内部监听其自身触发的事件已经不再可能了。但需要注意的是 $emit 仍然存在，因为它用于触发由父组件声明式添加的事件处理函数，我们还得用这个玩意父子组件通信呢！

vue3 官方讲到，事件总线模式可以被替换为使用外部的、实现了事件触发器接口的库，

例如 mitt 和 tiny-emitter，也就是说 你用这些库就行了！

---

当然，还可以通过以下方式进行兄弟组件传参，大家在这块简单看一下，知道有这么个事就行了。

SEO

vue3.js官方文档，vue3事件api官方文档，vue3事件api怎么用，Vue 3.0 事件API，Vue 3事件总线怎么实现，vue3:兄弟组件,跨组件传值,事件总线的通信方式，如何在Vue3中使用事件总线，vue通过全局事件总线实现兄弟组件通信，总结Vue3 的七种组件通信方式，Vue3 事件总线，VUE组件跨通信，vue兄弟组件间的通信(事件总线)，Vue组件通信之“全局事件总线-兄弟组件间的通信”，vue3的兄弟组件通信(事件总线)，Vue3 - 事件 API 新标准（如何在 Vue3 中怎么用事件总线实现兄弟组件通信？相比 Vue2 有什么不同？）。