当前位置：首页 > news >正文

组件通信-mitt

news 来源：原创 2025/5/3 7:16:21

mitt：与消息订阅与发布（pubsub）功能类似，可以实现任意组件间通信。

第一步：安装`mitt`

npm i mitt

第二步：新建文件：`src\utils\emitter.ts`

// 引入mitt
import mitt from "mitt"; //调用mitt得到emitter，emitter能：绑定事件、触发事件、解绑事件
const emitter= mitt()//暴露/导出
export default emitter;

第三步：接收数据的组件中：绑定事件、同时在销毁前解绑事件：

<script setup lang="ts">
import { ref,onUnmounted } from 'vue'
import emitter from '@/utils/emitter';
const toy = ref('奥特曼')
const phone = ref('')// 绑定send-phone事件监听  
emitter.on('send-phone', (value: any) => {  phone.value = value // 当接收到'send-phone'事件时，将传递的值赋值给phone  console.log(value); // 输出接收到的值  
})  // 在组件卸载时解除事件监听  
onUnmounted(() => {  emitter.off('send-phone') // 移除名为'send-phone'的事件监听  
})  
</script><template><div class="child"><h1>子组件2</h1><h3>子组件2的玩具：{{ toy }}</h3><h3>组件1给的手机：{{ phone }}</h3></div></template>

第四步：提供数据的组件，在合适的时候触发事件

<script setup lang="ts">
import { ref } from 'vue'
import emitter from '@/utils/emitter';
const phone = ref('oppo')
</script><template><div class="child"><h1>子组件1</h1><h4>子组件1的手机：{{ phone }}</h4><!-- 点击按钮时，通过事件总线发送名为'send-phone'的事件，并传递phone变量作为参数 -->  <button @click="emitter.emit('send-phone', phone)">测试</button></div></template>