Vue3组件通信的8种方式，完整源码带注释

Vue3组件通信

1、props父->子通信单向

props的数据是只读的

1.1 父组件

<template><div class="box"><h1>props:我是父组件</h1><hr/><!-- 父组件传递值--><Child :data="data"/></div>
</template><script setup lang="ts">import Child from './Child.vue'import {ref} from 'vue'let data = ref("我是你爹")
</script><style scoped>.box {width: 400px;heiht: 400px;background: green;}
</style>

1.2 子组件Child.vue

<template><div class="son"><h1>我是儿子</h1><!-- 读取父组件传递的值--><h2>{{money}}</h2></div>
</template>
<script setup lang="ts">// props是代理对象，代理中设置了money的值是readonly的，这里是定义属性let props = defineProps(['money'])
</script>
<style scoped>.son {width: 100px;height: 100px;background: red;}
</style>

2、自定义事件子->父通信单向

2.1 父组件Father

<template><div class="box"><h2>父组件接收到：{{p1}} -- {{p2}}</h2><Child @toFather="showData" /></div>
</template><script setup lang="ts">import Child from './Child.vue'import {ref} from 'vue'let p1 = ref()let p2 = ref()let showData = (param1,param2)=> {p1.value = param1p2.value = param2}
</script>
<style scoped>.box {width: 600px;height: 400px;background: green;}
</style>

2.2 子组件Son.vue

<template><div class="son"><button @click="sendToFather">传递参数给父组件</button></div>
</template><script setup lang="ts">let emits = defineEmits(['toFather'])let sendToFather = ()=> {// 调用父组件的方法toFatheremits('toFather','我是参数1','我是参数2')}
</script>
<style scoped>.son {width: 300px;height: 100px;background: red;}
</style>

3、全局事件总线 任意组件<=>任意组件双向

实现任意组件通信，需要使用插件，可以使用mit

3.1 案例目标：兄弟节点通信

1、接收数据方使用on绑定事件

2、发送数据方使用emit触发on绑定事件

3.2 mitt插件

1、安装mitt插件

在当前项目根目录下执行如下命令

$ npm install --save mitt

2、npmjs.com介绍的使用方式

import mitt from 'mitt'        // 导入const emitter = mitt()		   // 上一步导入的其实是一个函数// listen to an event   on方法监听一个事件，事件名称叫foo
emitter.on('foo', e => console.log('foo', e) )// listen to all events  监听所有的方法，使用*代替所有方法
emitter.on('*', (type, e) => console.log(type, e) )// fire an event         emit函数触发foo事件的执行
emitter.emit('foo', { a: 'b' })// clearing all events   清空所有的事件
emitter.all.clear()// working with handler references
function onFoo() {}
emitter.on('foo', onFoo)   // listen   绑定事件
emitter.off('foo', onFoo)  // unlisten   解绑事件

3.3 bus/bus.ts

import mitt from 'mitt'const $bus =