组件通信-mitt

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>