【Vue3】使用mitt实现任意组件通信

本文主要是介绍【Vue3】使用mitt实现任意组件通信，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

历史小剧场

最幸福的，就是中间那拨人，主要工作，叫做欺上瞒下，具体特点是，除了好事，什么都办；除了脸，什么都要。----《明朝那些事儿》

安装

npm install mitt

常用API

mitt().on() 绑定事件
mitt().emit() 触发事件
mitt().off() 卸载某个事件
mitt().all.clear() 卸载全部事件

使用方式一：封装模块暴露

步骤一

封装到utils工具箱中，对外暴露一个mitt实例

import mitt from 'mitt'const emitter = mitt()export default emitter;

步骤二

有两个组件，Child1，Child2

<!--  -->
<template><div><h3>子组件1</h3><h4>玩具: {{ toy }}</h4><button @click="sendToy">发送玩具</button></div>
</template><script lang="ts">
import { ref } from 'vue';
import mitter from '../../utils/emitter'
export default {setup() {const toy = ref("奥特曼")const sendToy = () => {mitter.emit('send-toy', toy)}return {toy,sendToy}}
}
</script><style lang="scss" scoped></style>

<!--  -->
<template><div><h3>子组件2</h3><h4>小孩: {{ boy }}</h4><h5>从子组件1来的玩具: {{ toy }}</h5></div>
</template><script setup lang="ts" name="Child2">
import { Ref, onUnmounted, ref } from 'vue';
import mitter from '../../utils/emitter'const boy = ref('大傻叉')
const toy = ref()
mitter.on('send-toy', (val: Ref) => {console.log("val => ", val)toy.value = val.value
})onUnmounted(() => {mitter.all.clear()
})</script><style lang="scss" scoped></style>

使用方式二：main.ts 挂载到全局

步骤一

main.ts

import mitt from 'mitt';const app = createApp(App)// 挂载到全局实例上
app.config.globalProperties.$EventBus = mitt()

步骤二

Child1:

<!--  -->
<template><div><h3>子组件1</h3><h4>玩具: {{ toy }}</h4><button @click="sendToy">发送玩具</button></div>
</template><script lang="ts">
import { getCurrentInstance, ref } from 'vue';export default {setup() {const toy = ref("奥特曼")// 同 vue2中的 thisconst { proxy } = getCurrentInstance();const sendToy = () => {proxy.$EventBus.emit('send-toy', toy)}return {toy,sendToy}}
}</script><style lang="scss" scoped></style>

Child2:

<!--  -->
<template><div><h3>子组件2</h3><h4>小孩: {{ boy }}</h4><h5>从子组件1来的玩具: {{ toy }}</h5></div>
</template><script setup lang="ts" name="Child2">
import { Ref, getCurrentInstance, onUnmounted, ref } from 'vue';
const { proxy } = getCurrentInstance();
const boy = ref('大傻叉')
const toy = ref()
proxy.$EventBus.on('send-toy', (val: Ref) => {console.log("val => ", val)toy.value = val.value
})onUnmounted(() => {proxy.$EventBus.all.clear()
})</script><style lang="scss" scoped></style>