Vue3组件通信和Vue2的区别：
- 移出事件总线，使用
mitt代替。 -
vuex换成了pinia。 - 把
.sync优化到了v-model里面了。 - 把
$listeners所有的东西，合并到$attrs中了。 -
$children被砍掉了。
【1】props
概述：props是使用频率最高的一种通信方式，常用与 ：父 ↔ 子。
- 若 父传子：属性值是非函数。
- 若 子传父：属性值是函数。
父组件：
<template>
<div class="father">
<h3>父组件</h3>
<h4>汽车：{{ car }}</h4>
<h4 v-show="toy">子给的玩具：{{ toy }}</h4>
//传递数据和方法
<Child :car="car" :sendToy="getToy"/>
</div>
</template>
<script setup lang="ts" name="Father">
import Child from './Child.vue'
import {ref} from 'vue'
// 数据
let car = ref('奔驰')
let toy = ref('')
// 方法
function getToy(value:string){
toy.value = value
}
</script>子组件：
<template>
<div class="child">
<h3>子组件</h3>
<h4>玩具：{{ toy }}</h4>
<h4>父给的车：{{ car }}</h4>
// 点击会触发父组件的方法
<button @click="sendToy(toy)">把玩具给父亲</button>
</div>
</template>
<script setup lang="ts" name="Child">
import {ref} from 'vue'
// 数据
let toy = ref('奥特曼')
// 声明接收props
defineProps(['car','sendToy'])
</script>【2】自定义事件
- 概述：自定义事件常用于：子 => 父。
- 注意区分好：原生事件、自定义事件。
- 原生事件：
- 事件名是特定的（
click、mosueenter等等） - 事件对象
$event: 是包含事件相关信息的对象（pageX、pageY、target、keyCode）
- 自定义事件：
- 事件名是任意名称
- 事件对象
$event: 是调用emit时所提供的数据，可以是任意类型！！！
父组件
<template>
<div class="father">
<h3>父组件</h3>
<h4 v-show="toy">子给的玩具：{{ toy }}</h4>
<!-- 给子组件Child绑定事件 -->
<Child @send-toy="saveToy"/>
</div>
</template>
<script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref } from "vue";
// 数据
let toy = ref('')
// 用于保存传递过来的玩具
function saveToy(value:string){
console.log('saveToy',value)
toy.value = value
}
</script>子组件
<template>
<div class="child">
<h3>子组件</h3>
<h4>玩具：{{ toy }}</h4>
<button @click="emit('send-toy',toy)">测试</button>
</div>
</template>
<script setup lang="ts" name="Child">
import { ref } from "vue";
// 数据
let toy = ref('奥特曼')
// 声明事件
const emit = defineEmits(['send-toy'])
</script>【3】mitt
概述：与消息订阅与发布（pubsub）功能类似，可以实现任意组件间通信。
安装mitt
npm i mitt新建文件：src\utils\emitter.ts
// 引入mitt
import mitt from "mitt";
// 创建emitter
const emitter = mitt()
// 暴露mitt
export default emitter接收数据的组件中：绑定事件、同时在销毁前解绑事件：
import emitter from "@/utils/emitter";
import { onUnmounted } from "vue";
// 绑定事件
emitter.on('send-toy',(value)=>{
console.log('send-toy事件被触发',value)
})
onUnmounted(()=>{
// 解绑事件
emitter.off('send-toy')
})提供数据的组件，在合适的时候触发事件
import emitter from "@/utils/emitter";
function sendToy(){
// 触发事件
emitter.emit('send-toy',toy.value)
}