dw做存资料网站网店营销
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>