Vue3组件通信全解析：利用props、emit、provide/inject跨层级传递数据，expose与ref实现父子组件方法调用

文章目录

• • • 一、父组件数据传递N个层级的子组件
    • • vue3 provide 与 inject
      • A组件名称 app.vue
      • B组件名称 provideB.vue
      • C组件名称 provideCSetup.vue
    • 二、使用v-model指令实现父子组件的双向绑定
    • • 父组件名称 app.vue
      • 子组件名称 v-modelSetup.vue
    • 三、父组件props向子组件传值
    • • 子组件 propsSetup.vue
      • 父组件 app.vue
    • 四、子组件emit向父组件传值
    • • vue3 events 事件
      • 子组件eventsSetup.vue 定义事件
      • 父组件app.vue接收子组件eventsSetup.vue的done事件
    • 五、通过expose和ref来实现父组件调用子组件的方法
    • • 父组件 app.vue
      • 子组件名称 child.vue

一、父组件数据传递N个层级的子组件

vue3 provide 与 inject

我们通过props属性可以把数据传给组件，而通过provide与inject我们可以把数据传递给N个层级的子组件，比如A组件用了B组件，B组件用了C组件，它可以把组件直接从A传给C组件,vue2使用computed来实现响应式,而vue3中 provide 使用ref或reactive定义的变量即可实现响应式。

A组件传入值,传入了userInfo对象，不用管传给谁了谁，谁都可以去接收key为provideCount的数据

A组件名称 app.vue

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

B组件调用C组件,但是我啥也没干

B组件名称 provideB.vue

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

C组件获取A组件传入的值,我修改了userInfo的值，A组件也会跟着变哦。

C组件名称 provideCSetup.vue

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

二、使用v-model指令实现父子组件的双向绑定

v-model是vue3的一个内置指令，可以实现父组件变量(不能是常量)与子组件属性的双向绑定，我们在很多知名的开源库可以看到这个命令,比如我们要实现一个弹窗组件需要父组件和子组件都可以操作这个变量来实现隐藏显示统一步调。

• 1
• 2
• 3

父组件名称 app.vue

在父组件中，使用v-model指令将子组件的某个prop绑定到父组件的某个变量上

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

v-modelSetup.vue子组件实现修改v-model的值（属性值）

子组件名称 v-modelSetup.vue

在子组件中，将子组件的某个prop绑定到子组件的某个变量上，并在该变量上使用计算属性或观察者监听该prop的变化

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38

三、父组件props向子组件传值

vue3 通过 props 来定义属性，我们可以通过属性将值传给自定义组件，比如颜色、高度宽度等等，定义属性时我们也可以定义类型和默认值,本文重点描述了如何定义属性和修改属性的值。

子组件 propsSetup.vue

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38

使用该自定义组件

父组件 app.vue

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

四、子组件emit向父组件传值

vue3 events 事件

事件是组件开发中必不可少的部分，事件就是当你完成了某个任务后你把这个事情告诉别人的动作，比如你在组件中保存成功了数据等等，本文将介绍任何在vue3中定义事件以及调用者任何接收这个事件。

子组件eventsSetup.vue 定义事件

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37

父组件app.vue接收子组件eventsSetup.vue的done事件

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

五、通过expose和ref来实现父组件调用子组件的方法

vue3父组件调用子组件的方法是通过expose和ref来实现的，我们可以通过expose来控制父组件可以访问子组件那些的方法和对象，我们将通过setup api(组合式 api)和option api(选项式 api)来演示父组件如何调用子组件的方法。

父组件 app.vue

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

子组件名称 child.vue

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24