const eventBus = new EventBus(); export default eventBus; 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 在main.ts中创建一个全局的事件总线 app.config.globalProperties.$bus = {}; // 直接在全局属性中创建事件总线 1. 然后...
import EventBus from '../utils/EventBus'; 1. 引入完成,父组件接收 mitt 传递的数据,需要使用一个方法,叫做EventBus.on( type, handler ),这个方法也需要两个参数:type是要调用的事件类型,比如上面子组件发送数据的时候使用的是sendData,那么父组件如果想接收子组件发送的这个数据,此处也要设置为sendData;第二...
vue3 实现跨组件通信 通过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(()=>{...
1、npm install mitt 添加mitt 2、单独开一个eventbus.ts,引入mitt,执行mott库导出的函数获取事件总线对象并暴露；3、在A组件中引入eventbus.ts,发起事件:emitter.emit('updateMenu', {to:'/logList', from:'/statisticalReportsList'});updateMenu是自定义事件名，后面则为参数携带的参数 4、在B...
vue3+ts 全局事件总线mitt Mitt 在vue3中 $ on,$off 和 $once 实例方法已被移除,组件实例不再实现事件触发接口,因此大家熟悉的EventBus便无法使用了。然而我们习惯了使用EventBus,对于这种情况我们可以使用Mitt库 npm i mitt -S 首先要在全局挂载 mitt...
#创建 3.x 的 EventBus 这里以mitt为例,示范如何创建一个 Vue 3.x 的EventBus。 首先,需要安装mitt: npm install --save mitt 然后在libs文件夹下,创建一个bus.ts文件,内容和旧版写法其实是一样的,只不过是把 Vue 实例,换成了 mitt 实例。
import {getCurrentInstance} from 'vue' const instance = getCurrentInstance() // emit为自定义的发布事件,由于配置过类型提示,会出现 all | emit | on | clear // emit接受第一个参数为事件名(自定义),第二个参数为传递的值 const emit = () => { instance?.proxy?.emitter.emit('mitt-foo','...
事件总线(event bus)比较特殊,因为在组合式API里不支持该方式,所以下面的例子适合 Option API 组件。 代码语言:javascript 复制 <!--App.vue-->import{ref}from"vue";importOtherfrom"./components/Other.vue";constcount=ref(0)constupdateCount=()=>count.value++<template>公众号:萌萌哒草头将军{{count}...
2. 体积更小了(删除了一些不常用的 API,例如 filter,EventBus;Vue3 中所有的 API 都是按需导入,能配合 Webpack 支持 TreeShaking)。 3. 对 TS 的支持更好了(源码都是用 TypeScript 写的)。 4. Composition API(组合 API,Vue2 叫 Options API),对于大型项目更利于同一功能的数据和业务逻辑维护和复用!
而 Vue3 中移除了这些相关方法，这意味着 EventBus 这种方式我们使用不了， Vue3 推荐尽可能使用 props/emits、provide/inject、vuex 等其他方式来替代。当然，如果 Vue3 内部的方式无法满足你，官方建议使用一些外部的辅助库，例如：mitt。优点 非常小，压缩后仅有 200 bytes。完整 TS 支持，源码由 TS 编码。跨...