发布订阅-Mitt(与全局变量的使用)

地址：www.npmjs.com/package/mit…

Install：npm i mitt

Vue3已经移除 $on，$off 和 $once ，所以我们可以引入mitt实现EventBus

引入组件后需在main.js中配置

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'


import mitt from "mitt";
const Mit = mitt()
//TypeScript注册
// 由于必须要拓展ComponentCustomProperties类型才能获得类型提示
declare module "vue" {
    export interface ComponentCustomProperties {
        $Bus: typeof Mit
    }
}

const app = createApp(App)

app.use(router)
app.config.globalProperties.$Bus = Mit

app.mount('#app')

使用方式:兄弟组件A向兄弟组件C发布消息

父组件：mitt.vue

<script setup >
/**
 * 发布订阅（一般用于兄弟组件传参）的使用  uni中可以直接使用emit与on
 * 这里采取全局引入的使用方式，请查看main.ts的相关配置
 */
import A from "./components/A.vue";
import C from "./components/C.vue";
</script>

<template>
  <div class="flex-column">
    发布订阅
    <A/>
    <C/>
  </div>
</template>

组件A

<script setup >
import {getCurrentInstance} from "vue";
const instance = getCurrentInstance()
const mitt = () => {
  instance?.proxy?.$Bus.emit('mittPub', '兄弟，救我！！！')
}
</script>
<template>
  <div>
    我是A组件
    <button @click="mitt">mitt触发</button>
  </div>
</template>

组件C

<script setup >
import {getCurrentInstance, ref} from "vue";
const instance = getCurrentInstance()
const mittVal = ref('')
instance?.proxy?.$Bus.on('mittPub', (val:string) =>{
  mittVal.value = val
})
</script>

<template>
  <div class="c">我是C组件</div>
  <div class="c">{{mittVal}}</div>
</template>

<style scoped>
.c {
  background-color: gold;
  width: 200px;
  height: 100px;
}
</style>