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 = param1
        p2.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 = ()=> {
        // 调用父组件的方法toFather
        emits('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 =