vue3 ts 兄弟组件传值

前言

组件和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)
})

希望对你有用！