Vue3组件通信 详解(下)

Vue3组件通信 详解(上)-CSDN博客

v-model通讯

概述：实现 父↔子 之间相互通信。

v-model本质

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

model2.vue文件

model1.vue文件

效果

$attrs

1. 概述：$attrs用于实现当前组件的父组件，向当前组件的子组件通信（祖→孙）。

2. 具体说明：$attrs是一个对象，包含所有父组件传入的标签属性。

   注意：$attrs会自动排除props中声明的属性(可以认为声明过的 props 被子组件自己“消费”了)

 父组件：

子组件：

孙组件：

provide、inject

1. 概述：实现祖孙组件直接通信

2. 具体使用：

   • 在祖先组件中通过provide配置向后代组件提供数据

   • 在后代组件中通过inject配置来声明接收数据

3. 具体编码：

   【第一步】父组件中，使用provide提供数据

注意：子组件中不用编写任何东西，是不受到任何打扰的

【第二步】孙组件中使用inject配置项接受数据。

pinia

Vue3 pinia全解(上)-CSDN博客

 slot插槽

Vue 插槽讲解-CSDN博客