【vue3】组件通信

一、Vue3 组件通信和 Vue2 的区别：

● 移出事件总线，使用 mitt 代替。

● vuex 换成了 pinia 。

● 把 .sync 优化到了 v-model 里面了。

● 把 $listeners 所有的东西，合并到 $attrs 中了。

● $children 被砍掉了。

常见搭配形式：

二、【props】

概述： props 是使用频率最高的一种通信方式，常用与 ：**父 ↔ 子**。

● 若 父传子：属性值是**非函数**。

● 若 子传父：属性值是**函数**。

父组件：

<template>
<div class="father">
<h3>父组件，</h3>
<h4>我的车：{{ car }}</h4>
<h4>儿子给的玩具：{{ toy }}</h4>
<Child :car="car" :getToy="getToy"/>
</div>
</template>
<script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref } from "vue";
// 数据
const car = ref('奔驰')
const toy = ref()
// 方法
function getToy(value:string){
toy.value = value
}
</script>

子组件

<template>
<div class="child">
<h3>子组件</h3>
<h4>我的玩具：{{ toy }}</h4>
<h4>父给我的车：{{ car }}</h4>
<button @click="getToy(toy)">玩具给父亲</button>
</div>
</template>
<script setup lang="ts" name="Child">
import { ref } from "vue";
const toy = ref('奥特曼')
defineProps(['car','getToy'])
</script>

三、【自定义事件】

1. 概述：自定义事件常用于：**子 => 父。**

2. 注意区分好：原生事件、自定义事件。

● 原生事件：
● 事件名是特定的（ click 、 mosueenter 等等）
● 事件对象 $event : 是包含事件相关信息的对象（ pageX 、 pageY 、 target 、 keyCode ）

● 自定义事件：
● 事件名是任意名称
● 事件对象 $event : 是调用 emit 时所提供的数据，可以是任意类型！！！

示例：

<!--在父组件中，给子组件绑定自定义事件：-->
<Child @send-toy="toy = $event"/>
<!--注意区分原生事件与自定义事件中的$event-->
<button @click="toy = $event">测试</button>


//子组件中，触发事件：
this.$emit('send-toy', 具体数据)

四、【v-model】

1. 概述：实现 父↔子 之间相互通信。
2. 前序知识 —— v-model 的本质

<!-- 使用v-model指令 -->
<input type="text" v-model="userName">
<!-- v-model的本质是下面这行代码 -->
<input
type="text"
:value="userName"
@input="userName =(<HTMLInputElement>$event.target).value"
>

3. 组件标签上的 v-model 的本质： :moldeValue ＋ update:modelValue 事件。

<!-- 组件标签上使用v-model指令 -->
<AtguiguInput v-model="userName"/>
<!-- 组件标签上v-model的本质 -->
<AtguiguInput :modelValue="userName" @update:model-value="userName = $event"/>

AtguiguInput 组件中：

<template>
<div class="box">
<!--将接收的value值赋给input元素的value属性，目的是：为了呈现数据 -->
<!--给input元素绑定原生input事件，触发input事件时，进而触发update:model-value事件-->
<input
type="text"
:value="modelValue"
@input="emit('update:model-value',$event.target.value)"
>
</div>
</template>
<script setup lang="ts" name="AtguiguInput">
// 接收props
defineProps(['modelValue'])
// 声明事件
const emit = defineEmits(['update:model-value'])
</script>

五、【$refs、$parent】

1. 概述：
● $refs 用于 ：**父→子。**
● $parent 用于：**子→父。**

1. 原理如下：

属性	说明
$refs	值为对象，包含所有被 ref 属性标识的 DOM 元素或组件实 例。
$parent	值为对象，当前组件的父组件实例对象。