目录
父传子值、方法（子调用父值、方法）
子传父值（父调用子值）
父读子（子传父）（父调用子值、方法）
兄弟（任意组件）通信
引入Mitt来完成任意组件通信
父传子值、方法（子调用父值、方法）
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) => voidon:(name:string, callback:Function) => void}// 定义多种参数类型type PramsKey = string | number | symbol// 定义一个调用中心,可以接收多个参数type List = {[key:PramsKey]: Array<Function>}class Bus implements BusClass {list: Listconstructor (){// 初始化listthis.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}}// 导出busexport default new Bus()
现在来使用刚刚定义的bus，将A组件的值传递给B组件
A组件
<button @click="emitB">派发一个事件</button>// 引入busimport Bus from '../Bus'// 定义一个属性值let flag = '我来自A组件'const emitB = () =>{// 通过Bus发布出去一个'on-click'事件，并携带flag 参数Bus.emit('on-click',flag)}
B组件
// 引入busimport 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组件
// 引入busimport 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()
该方法不仅方便，且可以实现任意组件通信，极其方便实用！
该方法不仅方便，且可以实现任意组件通信，极其方便实用！
