建设小型网站价钱,丹徒网站建设报价,如何建设网站 企业,做平面图片的网站前言
现在的项目慢慢从 Vue2 升级到 Vue3 了#xff0c;之前 Vue2 自带的中央事件总线是 EventBus#xff0c;在 Vue3 中已经被移除了#xff0c;官方推荐使用 Mitt 发布订阅库。在此简单记录一下 Mitt 的使用方式。
一、导入依赖
npm i mitt -D
二、全局引入
#xf…前言
现在的项目慢慢从 Vue2 升级到 Vue3 了之前 Vue2 自带的中央事件总线是 EventBus在 Vue3 中已经被移除了官方推荐使用 Mitt 发布订阅库。在此简单记录一下 Mitt 的使用方式。
一、导入依赖
npm i mitt -D
二、全局引入
1/src/main.ts
// 引入Mitt工具并配置为全局方法
import mitt from mitt
app.config.globalProperties.$mittBus mitt()
三、示例代码
1/src/views/Example/Mitt/index.vue
templatediv classmitth1span主页面/spanpbutton clickhandleRemoveAEvent取消订阅A事件/button/ppbutton clickhandleRemoveBEvent取消订阅B事件/button/ppbutton clickhandleEmitCEvent发布C事件/button/ppbutton clickhandleRemoveAllEvent取消订阅所有事件/button/p/h1div classmitt-boxemitA classmitt-box_A /emitB classmitt-box_B //div/div
/templatescript setup
import { onMounted, onUnmounted, ref, getCurrentInstance } from vue
import emitA from ./emit_A.vue
import emitB from ./emit_B.vue// 代理对象
const { proxy } getCurrentInstance()// 消息事件总线
const bus proxy.$mittBus// 取消订阅A事件
const handleRemoveAEvent async () {proxy.$mittBus.off(A_Event)console.log(取消订阅A事件 Finished!)
}// 取消订阅B事件
const handleRemoveBEvent () {proxy.$mittBus.off(B_Event)console.log(取消订阅B事件 Finished!)
}// 取消订阅所有事件
const handleRemoveAllEvent () {proxy.$mittBus.all.clear()console.log(取消订阅所有事件 Finished!)
}// 发布C事件
const handleEmitCEvent () {bus.emit(C_Event, 这是一条来自主页面发布的消息)
}onMounted(() {// 订阅A事件proxy.$mittBus.on(A_Event, (val) {console.log(主页面收到一条信息 , val)})// 订阅B事件proxy.$mittBus.on(B_Event, (val) {console.log(主页面收到一条信息 , val)})
})onUnmounted(() {handleRemoveAllEvent()
})
/scriptstyle langless scoped.mitt {display: flex;flex-direction: column;padding: 100px;h1 {padding: 20px;border: 1px solid #dcdfe6;font-weight: lighter;text-align: center;}.mitt-box {flex: 1;display: flex;flex-direction: row;.mitt-box_A {flex: 1;border: 1px solid #dcdfe6;text-align: center;margin: 7px 3.5px 0 0;padding: 20px;}.mitt-box_B {flex: 1;border: 1px solid #dcdfe6;text-align: center;margin: 7px 0 0 3.5px;padding: 20px;}}}
/style2/src/views/Example/Mitt/emit_A.vue
templatedivh1 stylefont-weight: lighterspanA页面/span/h1button clickfn发布A事件/button/div
/templatescript
export default {data: () ({}),created() {},mounted() {this.fn()// 订阅C事件this.$mittBus.on(C_Event, (val) {console.log(A页面收到一条信息 , val)})},methods: {fn() {// 发布A事件const bus this.$mittBusconst data {success: true,data: OK,msg: 这是来自A页面的一条信息}bus.emit(A_Event, data)}}
}
/script3/src/views/Example/Mitt/emit_B.vue
templatedivh1 stylefont-weight: lighterspanB页面/span/h1button clickfn发布B事件/button/div
/templatescript
export default {data: () ({}),created() {},mounted() {this.fn()// 订阅C事件this.$mittBus.on(C_Event, (val) {console.log(B页面收到一条信息 , val)})},methods: {fn() {// 发布B事件const bus this.$mittBusconst data {success: true,data: OK,msg: 这是来自B页面的一条信息}bus.emit(B_Event, data)}}
}
/script四、运行效果
