VUE3+TS（父子、兄弟组件通信）

Johnson_9

已于 2022-11-20 21:36:25 修改

阅读量1.2w

点赞数 12

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

于 2022-07-21 16:18:11 首次发布

本文链接：https://blog.csdn.net/Johnson_7/article/details/125913937

父传子值、方法（子调用父值、方法）

1、统一规范写法，通过在子组件标签上绑定属性和值，来传递到子组件，子组件再通过defineProps来接收，先给其定义类型再用withDefaults是为了在不传递的时候给其一个默认值

//父组件直接在标签发送
<Children :aaa="aaa" :data="data"></Children>
------------------------------------------------
//子组件两种接收方式
//方式一：子组件定义类型再接收
//?表示可传可不传
type Props = { aaa?: String; data?: number[] };
//通过defineProps接受，给一个默认值    
const a = withDefaults(defineProps<Props>(), {
  aaa: '张三',
  data: [1, 2],
});
//调用
const changehandle = () => {
  console.log(a.aaa);
  console.log(a.data[0]);
};
//方式二：子组件混合定义接收
import { PropType } from 'vue';
const prop = defineProps({
    aaa: {
        type: Object as PropType<Student>,
        default: () => { }
    },
    //定义接收父组件方法
    bbb: {
        type: Function,
        default: () => { }
    },
})
//调用
prop.aaa;
prop.bbb();

2、利用vue自带的provide传递、inject接受，用法很简单，需要响应式只需要用ref包起来

// 父组件，引入provide，然后定义一个属性和值
import {provide} from 'vue'
provide('flag',xxx)

// 子组件，先引入inject，再获取
import {inject} from 'vue'
let data = inject('flag')

子传父值（父调用子值）

先用defineEmits定义一个emit，里面存放即将被调用的自定义事件名，然后将其写进一个方法里，再通过父组件来定义这个事件，触发事件即可获取绑定的属性值

//子组件定义一个点击事件
<el-button type="success" @click="changehandle">子组件按钮</el-button>
//定义一个自定义事件
const emit = defineEmits(['clickToFather']);
//通过事件传过去
const changehandle = () => {
  emit('clickToFather', msg);
};

//父组件使用自定义事件名
<Children @clickToFather="getList"></Children>
//调用获取
const getList = (msg: string) => {
  console.log(msg);
};

父读子（子传父）（父调用子值、方法）

简单来说就是父组件获取到子组件的实例，用实例来调用子组件的方法，但是和vue2不同的是，子组件需要将方法暴露出去，父组件才能通过实例获取到，这样就确保了足够的安全性

//子组件将值暴露出去
defineExpose({
  msg,
});

//父组件获得子组件的实例
<Children ref="menus"/>
//定义
const menus = ref(null);
//调用
const changehandle = () => {
  console.log(menus.value.msg);
};

兄弟（任意组件）通信

1、兄弟组件通信：可以先把值传给父组件，再通过父组件传给另一个子组件，就做到了兄弟组件的传参，但是问题就是及其麻烦，所以引出第二种方式

2、通过消息的发布订阅来实现，定义一个bus（可实现任意组件通信）

先在父组件所在目录下定义一个Bus.ts文件

// 先定义一个类型，emit作为发布(传递)，on作为订阅(接收)
// name是事件名称，callback是一个回调函数
type BusClass = {
    emit:(name:string) => void
    on:(name:string, callback:Function) => void
}
// 定义多种参数类型
type PramsKey = string | number | symbol
// 定义一个调用中心,可以接收多个参数
type List = {
   [key:PramsKey]: Array<Function>
}
class Bus implements BusClass {
    list: List
    constructor (){
        // 初始化list
        this.list = {}   
    }
    // 发布事件,...args解构多个参数
    emit (name:string,...args:Array<any>){
        // 获取到list里的数据
        let evnentName:Array<Function> = this.list[name]
        evnentName.forEach(fn =>{
            fn.apply(this, args)
        })
    }
    // 接收事件
    on (name:string, callback:Function){
        // 如果是第一次注册，则为空；如果被多次注册，则采用之前注册的名字
        let fn:Array<Function> = this.list[name] || []
        fn.push(callback)
        this.list[name] = fn
    }
}
// 导出bus
export default new Bus()

现在来使用刚刚定义的bus，将A组件的值传递给B组件

A组件

<button @click="emitB">派发一个事件</button>

// 引入bus
import Bus from '../Bus'
// 定义一个属性值
let flag = '我来自A组件'
const emitB = () =>{
    // 通过Bus发布出去一个'on-click'事件，并携带flag 参数
    Bus.emit('on-click',flag)
}

B组件

// 引入bus
import Bus from '../Bus'
// 接收事件
Bus.on('on-click',(flag: string) =>{
    console.log('接收的值为',flag)
})

这样就完成了一个兄弟组件的传参

该方法不仅方便，且可以实现任意组件通信，极其方便实用！

引入Mitt来完成任意组件通信

当然了，上面只是我们自己手写的Bus，其实这个库别人早已写好了，我们可以直接引入

首先安装依赖：

#安装命令
npm install mitt -S

全局使用

在main.ts文件中引入并开启使用

// 引入
import mitt from 'mitt'
//定义
const Mit = mitt()
//全局声明
declare module 'vue' {
    export interface ComponentCustomProperties{
        $Bus: typeof Mit
    }
}
//使用
app.config.globalProperties.$Bus = Miit()

引入完成，使用方式和手写的基本一致，只不过名字不同

A组件

<button @click="emit">派发一个事件</button>

//引入
import {getCurentInstance} from 'vue'
//初始化
const instance = getCurentInstance()
//使用(发送事件)
const emit = () =>{
    // emit(自定义事件名,参数,....)
    instance?.proxy?.$Bus.emit('on-click',xxx)
}

B组件

// 引入bus
import getCurentInstance from 'vue'
// 初始化
const instance = getCurentInstance()
// 接收事件
instance?.proxy?.$Bus.on('on-click',(xxx: string) =>{
    console.log('接收的值为',xxx)
})

如果此时A组件发送了多个事件，B组件可以用*接收，写法如下

// yyy,xxx为两个事件的参数
instance?.proxy?.$Bus.on('*',(yyy,xxx) =>{
    console.log('接收的值为',yyy,xxx)
})

有发送事件，自然还有取消事件

// 这里先把Bus提取出来
const Bus = (xxx) =>{
    console.log('接收的值为',xxx)
}
// 这里依旧写on，接收事件
instance?.proxy?.$Bus.on('on-click',Bus)

// 这里还可以调用取消指定事件
// off(取消指定的mitt事件,取消的函数)
instance?.proxy?.$Bus.off('on-click',Bus)

// 还可以取消全部事件
instance?.proxy?.$Bus.all.clear()

该方法不仅方便，且可以实现任意组件通信，极其方便实用！