npm install -S mitt
1.组件总线
①vue入口文件main.js中挂载全局属性
//导入vue创建命令 import { createApp } from 'vue'; //导入vue入口组件 import App from './App.vue'; //导入插件mitt import mitt from "mitt" ... //创建Vue应用实例 const app = createApp(App) //挂载事务总线为全局属性 app.config.globalProperties.$mybus = new mitt() ... app 是自定义Vue实例名 mybus 是自定义总线属性名
②组件中发送事件/发布
this.$mybus.emit('自定义事件名称','数据');
③组件中接收事件/订阅
this.$mybus.on('自定义事件名称',data=>{ console.log(data); //控制台输出接收到的数据 })
④移除总线事件监听
this.$mybus.off('自定义事件名称')
2. 组件总线
①封装自定义事务总线文件mybus.js
创建新的js文件，自定义命名
/src/myplugins/mybus.js import mitt from 'mitt' export default mitt()
②在发送和接收组件中分别导入mybus.js
<template> ... </template> <script> import mybus from "../myplugins/mybus"; ... export default { ... } </script> <style> ... </style> 注意： 组件中导入文件mybus.js使用相对路径
③发送事件/发布
mybus.emit('自定义事件名称','数据');
④接收事件/订阅
mybus.on('自定义事件名称',data=>{ console.log(data);//接收到的数据 })
⑤移除总线事件监听
mybus.off('自定义事件名称');
