vue 2 中要进行跨元件通讯，除了Vuex 以外的另一个常见手法是Event Bus，对于小型专案来说Event Bus 相当方便，仅需要$on、$emit两个语法就能进行跨元件通讯。而Vue 3 中移除了$on、$off等语法，因此Event Bus 也等同于被移除。

在Vue 3 的官方文件中也有提如果有类似的功能需求，可以参考相关的套件 mitt 或tiny-emitter，两者运作上差异不大，在此就针对 mitt 来进行介绍。

mitt

mitt套件可用于Vue 3，但不仅限于在Vue 应用中使用，当有跨模组的沟通功能时都可以引用此套件，优点是写法及运用上都会与Vue 2 的Event bus 相当接近（而且不需要在Vue 的Prototype 上加入额外的方法）。

mitt: https://github.com/developit/mitt

范例程式码：

汇入mitt 的元件并调用它。

const emitter = mitt();

建立html 结构，并且加入两个元件，本范例中会将 component-a 的资料传送至component-b。

<div id="app">
  <component-a></component-a>
  <hr>
  <component-b></component-b>
</div>

元件component-a，会使用 emitter.emit 的方法推送资料至另一个元件上。

app.component('component-a', {
  data() {
    return {
      text: '這有一段話'
    }
  },
  template: `<div>{{ text }} <button type="button" @click="pushData">發送至另一個元件</button></div>`,
  methods: {
    pushData() {
      emitter.emit('getData', this.text);
    }
  }
});

在 component-b 制作监听，使用 emitter.on 接收来自于 component-a 的资料。

app.component('component-b', {
  data() {
    return {
      text: '原始資料'
    }
  },
  template: `<div>{{ text }}</div>`,
  created() {
    emitter.on('getData', (msg) => {
      this.text = msg;
    });
  }
});

可点击画面中的「发送至另一个元件」，component-a的text 将会透过事件 getData 传递至component-b。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/11501