【vue3】组件通信

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

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

● vuex 换成了 pinia 。

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

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

● $children 被砍掉了。

常见搭配形式：

二、【props】

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

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

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

父组件：

子组件

三、【自定义事件】

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

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

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

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

示例：

测试


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

四、【v-model】

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

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

AtguiguInput 组件中：

五、【$refs、$parent】

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

1. 原理如下：

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