首先,在utils文件夹下创建一个EventBus.ts文件 //封装中央事件总线 class EventBus { private events: Record<string, Function[]> = {}; on(event: string, callback: Function) { if (!this.events[event]) { this.events[event] = []; } this.events[event].push(callback); } off(event: string...
import {getCurrentInstance} from 'vue' const instance = getCurrentInstance() // emit为自定义的发布事件,由于配置过类型提示,会出现 all | emit | on | clear // emit接受第一个参数为事件名(自定义),第二个参数为传递的值 const emit = () => { instance?.proxy?.emitter.emit('mitt-foo','...
import EventBus from '../utils/EventBus'; 1. 引入完成,父组件接收 mitt 传递的数据,需要使用一个方法,叫做EventBus.on( type, handler ),这个方法也需要两个参数:type是要调用的事件类型,比如上面子组件发送数据的时候使用的是sendData,那么父组件如果想接收子组件发送的这个数据,此处也要设置为sendData;第二...
在vue3中 $ on,$off 和 $once 实例方法已被移除,组件实例不再实现事件触发接口,因此大家熟悉的EventBus便无法使用了。然而我们习惯了使用EventBus,对于这种情况我们可以使用Mitt库 npm i mitt -S 首先要在全局挂载 mitt 在app.config.globalProperties上挂在$Bus 使用ts必须要拓展ComponentCustomProperties类型才能获...
通过mitt 实现跨组件通信 1. 安装 pnpm i mitt 2. 配置js eventbus.ts importmittfrom'mitt'constemitter=mitt()exportdefaultemitter; 3. 单组件中进行配置 import{ref,computed,toRefs,reactive,onMounted,onUnmounted}from'vue'importeventbusfrom'@/main/utils/eventbus';onMounted(()=>{eventbus.on("refresh...
1、npm install mitt 添加mitt 2、单独开一个eventbus.ts,引入mitt,执行mott库导出的函数获取事件总线对象并暴露；3、在A组件中引入eventbus.ts,发起事件:emitter.emit('updateMenu', {to:'/logList', from:'/statisticalReportsList'});updateMenu是自定义事件名，后面则为参数携带的参数 4、在B...
在Vue 3.x 的 EventBus,我们可以看到它的 API 和旧版是非常接近的,只是去掉了$符号。 如果你要对旧的项目进行升级改造,因为原来都是使用了$on、$emit等旧的 API ,一个一个组件去修改成新的 API 肯定不现实。 我们可以在创建bus.ts的时候,通过自定义一个bus对象,来挂载mitt的 API 。
事件总线(event bus)比较特殊,因为在组合式API里不支持该方式,所以下面的例子适合 Option API 组件。 代码语言:javascript 复制 <!--App.vue-->import{ref}from"vue";importOtherfrom"./components/Other.vue";constcount=ref(0)constupdateCount=()=>count.value++<template>公众号:萌萌哒草头将军{{count}...
在vue2使用 EventBus事件总线进行兄弟组件通信,而在Vue3中事件总线模式已经被移除,官方建议使用外部的、实现了事件触发器接口的库,例如 mitt 或tiny-emitter。 npm仓库地址:https://www.npmjs.com/package/mitt mitt的优势很明显: 首页体积小,大小200b