网站建设流程收费,百度站长社区,株洲网站制作,wordpress 数据库填写在vue3中$on#xff0c;$off 和 $once 实例方法已被移除#xff0c;组件实例不再实现事件触发接口#xff0c;因此大家熟悉的EventBus便无法使用了。然而我们习惯了使用EventBus#xff0c;对于这种情况我们可以使用Mitt库#xff08;其实就是我们视频中讲的发布订阅模式的…在vue3中$on$off 和 $once 实例方法已被移除组件实例不再实现事件触发接口因此大家熟悉的EventBus便无法使用了。然而我们习惯了使用EventBus对于这种情况我们可以使用Mitt库其实就是我们视频中讲的发布订阅模式的设计
一、安装
npm install mitt -S
二、main.ts 初始化
全局总线vue 入口文件 main.js 中挂载全局属性
import { createApp } from vue
import App from ./App.vue
import mitt from mittconst Mit mitt()//TypeScript注册
// 由于必须要拓展ComponentCustomProperties类型才能获得类型提示
declare module vue {export interface ComponentCustomProperties {$Bus: typeof Mit}
}const app createApp(App)//Vue3挂载全局API
app.config.globalProperties.$Bus Mitapp.mount(#app)
三、使用方法通过emit派发 on 方法添加事件off 方法移除clear 清空所有
A组件派发emit
templatedivh1我是A/h1button clickemit1emit1/buttonbutton clickemit2emit2/button/div
/templatescript setup langts
import { getCurrentInstance } from vue
const instance getCurrentInstance();
const emit1 () {instance?.proxy?.$Bus.emit(on-num, 100)
}
const emit2 () {instance?.proxy?.$Bus.emit(*****, 500)
}
/scriptstyle
/style
B组件监听on
templatedivh1我是B/h1/div
/templatescript setup langts
import { getCurrentInstance } from vue
const instance getCurrentInstance()
instance?.proxy?.$Bus.on(on-num, (num) {console.log(num,B)
})
/scriptstyle
/style
监听所有事件 on(*)
instance?.proxy?.$Bus.on(*,(type,num){console.log(type,num,B)
})
移除监听事件off
const Fn (num: any) {console.log(num, B)
}
instance?.proxy?.$Bus.on(on-num,Fn)//listen
instance?.proxy?.$Bus.off(on-num,Fn)//unListen
清空所有监听clear
instance?.proxy?.$Bus.all.clear()
转载自小满zs老师
