vue2升级vue3: Event Bus 替代方案

在看 https://v3-migration.vuejs.org/breaking-changes/events-api.html

在vue2里面

In 2.x, a Vue instance could be used to trigger handlers attached imperatively via the event emitter API ($on, $off and $once). This could be used to create an event bus to create global event listeners used across the whole application:

// eventBus.js

const eventBus = new Vue()

export default eventBus

直接在项目使用 

eventBus.$on('custom-event', () => {//TODO})

eventBus.$emit('custom-event')

但是,vue3移除了

We removed $on, $off and $once methods from the instance completely. $emit is still a part of the existing API as it's used to trigger event handlers declaratively attached by a parent component.

The event bus pattern can be replaced by using an external library implementing the event emitter interfacefor example mitt or tiny-emitter.

所以只能找第三方库,官方推荐有2个,特意对比了下

mitt vs tiny-emitter

https://www.npmtrends.com/tiny-emitter-vs-mitt

WX20220615-144427.jpg

mitt 和 tiny-emitter 对比分析

共同点

  1. 都支持on(type, handler)、off(type, [handler])和emit(type, [evt])三个方法来注册、注销、派发事件

不同点

  • emit

    1. 有 all 属性,可以拿到对应的事件类型和事件处理函数的映射对象,是一个Map不是{}

    2. 支持监听'*'事件,可以调用emitter.all.clear()清除所有事件

    3. 返回的是一个对象,对象存在上面的属性

  • tiny-emitter

    1. 支持链式调用, 通过e属性可以拿到所有事件(需要看代码才知道)

    2. 多一个 once 方法 并且 支持设置 this(指定上下文 ctx)

    3. 返回的一个函数实例,通过修改该函数原型对象来实现的

更多参看:mitter事件派发---mitt和tiny-emitter源码分析https://juejin.cn/post/7022851362568454157

 

看官方代码案例是tiny-emitter

$emit 目前只能从子组件向父组件传值了,event Bus 只有借助第三方库了

// eventBus.js
import emitter from 'tiny-emitter/instance'
export default {
  $on: (...args) => emitter.on(...args),
  $once: (...args) => emitter.once(...args),
  $off: (...args) => emitter.off(...args),
  $emit: (...args) => emitter.emit(...args)}

具体参看:https://github.com/scottcorgan/tiny-emitter

但是个人推荐 使用mitt

mitt.js使用

mitt 的用法和 EventEmitter 类似,通过 on 方法添加事件,off 方法移除,clear 清空所有。

import mitt from 'mitt'

const emitter = mitt()

// listen to an event
emitter.on('foo', e => console.log('foo', e) )

// listen to all events
emitter.on('*', (type, e) => console.log(type, e) )

// fire an event
emitter.emit('foo', { a: 'b' })
// clearing all events
emitter.all.clear()

这里安利一下:《原生js实现事件监听类on/emit/off方法,Vue event事件机制解读

mitt基于事件总线的订阅发布模式,任意组件之间都可以通信。provide/inject 在非组件中(一般用于子孙组件传值),就没法用了。

如何用 event bus 或 mitt 實現跨元件傳遞資料

在绝大多数情况下,不鼓励使用全局的事件总线在组件之间进行通信。虽然在短期内往往是最简单的解决方案,但从长期来看,它维护起来总是令人头疼。根据具体情况来看,有多种事件总线的替代方案:

  • props / emit 应该是父子组件之间沟通的首选。兄弟节点可以通过它们的父节点通信。

  • Provide 和 inject 允许一个组件与它的插槽内容进行通信。这对于总是一起使用的紧密耦合的组件非常有用。

  • provide/inject 也能够用于组件之间的远距离通信。它可以帮助避免“prop 逐级透传”,即 prop 需要通过许多层级的组件传递下去,但这些组件本身可能并不需要那些 prop。

  • Prop 逐级透传也可以通过重构以使用插槽来避免。如果一个中间组件不需要某些 prop,那么表明它可能存在关注点分离的问题。在该类组件中使用 slot 可以允许父节点直接为它创建内容,因此 prop 可以被直接传递而不需要中间组件的参与。

  • 全局状态管理,比如 Vuex

 

 

具体到插件如何用呢?

全局总线

import { createApp } from 'vue';
import App from './App.vue';
import mitt from "mitt"

const app = createApp(App)
app.config.globalProperties.$mybus = mitt()

vue2、vue3 ,个人都不推荐这种模式,即使要这种方式,推荐用:

import { createApp } from "vue";
import App from "./App.vue";

import mitt from 'mitt';                  // Import mitt
const emitter = mitt();                   // Initialize mitt

const app = createApp(App);
app.provide('emitter', emitter);          // ✅ Provide as `emitter`
app.mount('#app');

在子组件

import { inject } from 'vue'

export default {
  setup() {
    const emitter = inject("emitter"); // Inject `emitter`
    const mymethod = () => {
      emitter.emit("myevent", 100);
    };
    return {
      mymethod
    }
  }
}

任意组件都可以inject 出来,直接用。

封装自定义事务总线文件 mybus.js

创建新的 js 文件,在任何你想使用的地方导入即可。

import mitt from 'mitt';
type Events = {
  menuDrag?: DragEvent;
  menuDragend?: DragEvent;
};

const Bus = mitt<Events>();

export default Bus;

子组件使用

onMounted(() => {
  Bus.on('menuDrag', (e: DragEvent) => {
    drag(e);
  });
  Bus.on('menuDragend', (e: DragEvent) => {
    dragend(e);
  });
});

 

推荐使用此种模式

直接在组件里面导入使用

因为分散式更方便管理和排查问题。

import mitt from 'mitt'
export default {
  setup (props) {
    const formItemMitt = mitt()
    return {
      formItemMitt
    }
  }
}

组合式API推荐这种模式

 

不管那种方式,Vue 3 都建议在 beforeUnmount 移除监听(vue2在beforeDestroy移除)

 

 

参考文章:

Vue3.x 推荐使用 mitt.js https://juejin.cn/post/6973106775755063333

vue3:兄弟组件,跨组件传值,事件总线的通信方式(mitt / tiny-emitter) https://blog.csdn.net/qq_42543244/article/details/123806588

Vue 3 Event Bus with Composition API https://javascript.tutorialink.com/vue-3-event-bus-with-composition-api/

 

 

 

转载本站文章《vue2升级vue3: Event Bus 替代方案—— mitt》,
请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8837.html

posted @ 2022-06-21 20:26  zhoulujun  阅读(439)  评论(0编辑  收藏  举报