Vue3 中使用Event Bus

更新日期: 2022-04-12阅读量: 36标签: 通讯

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://www.fly63.com/article/detial/11501

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!