前言
组件和router-view之间的传值也是组件之间的传值
使用mitt
使用mitt代替vue2中兄弟组件之前的传值通信
安装
#安装命令
npm install mitt -S
全局注册
注意这里采用vue3+ts的方式使用
// 引入
import mitt from 'mitt'
//定义
type Events = {
foo: string;
bar: number;
};
const Mit = mitt<Events>()
//全局声明
declare module 'vue' {
export interface ComponentCustomProperties{
$Bus: typeof Mit
}
}
const app = createApp(App)
app.config.globalProperties.$Bus = Mit
组件之间使用
这里使用非语法糖模式
组件1发送
import {getCurrentInstance} from "vue";
const { proxy } = getCurrentInstance() as any;
//发送
const click = () =>{
proxy?.$Bus.emit('query',xxx需要通信的内容)
}
组件2接收
import {getCurrentInstance} from "vue";
const { proxy } = getCurrentInstance() as any;
//直接接收组件1的发送内容
proxy?.$Bus.on('query',(obj: any) =>{
console.log('接收的值为',obj)
})
希望对你有用!