【Vue3】组件通信之provide&inject

背景

随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。

简介

本文介绍 Vue3 中如何使用 provide 和 inject 实现父组件向子组件的子组件传数据，即向其孙子组件传数据。

Vue3 中组件间通信包括：

• 父组件向子组件传数据，实现方案有：
  • props
  • v-model
  • $ref
  • 默认插槽 / 具名插槽
• 子组件向父组件传数据
  • props
  • v-model
  • $parent
  • 自定义事件
  • 作用域插槽
• 父组件向子组件的子组件传数据，即向孙子组件传数据
  • $attrs
  • provider & inject
• 任意组件间传数据
  • mitt
  • Pinia

开发环境

开发步骤及源码

1> 创建 Vue3 工程，参考：【Vue3】工程创建及目录说明。

2> 删除 src 目录下 assets 和 components 目录。

3> 修改 src 目录下 main.ts。

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
1
2
3
4

4> 修改 Vue 根组件 src/App.vue 作为最顶层组件，使用 provide 向下层组件提供数据。

<template>
  <div class="content">
    <h2>制造商</h2>
    <h3>库存：{{ count }}</h3>
    <Agent />
  </div>
</template>

<script setup lang="ts">
import { provide, reactive, ref } from 'vue'
import Agent from './components/Agent.vue'

const count = ref(20)
const phone = reactive({
  brand: '华为',
  model: 'Mate60',
  price: 6999.00
})

function sell(value: number) {
  count.value -= value
}

// 向下层组件提供数据
provide('inventory', {count, sell})
provide('phone', phone)
</script>

<style scoped lang="scss">
.content {
  background-color: #D1D1D1;
  padding: 20px;
}
</style>
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

注意：需要执行 npm install -D sass 命令安装 CSS 预处理器。

5> 定义中间层组件。

<template>
    <div class="agent">
        <h2>代理商</h2>
        <Retailer />
    </div>
</template>

<script setup lang="ts">
import Retailer from './Retailer.vue'
</script>

<style scoped lang="scss">
.agent {
    background-color: #E1E1E1;
    padding: 20px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

6> 定义最底层组件，使用 inject 方法接收来自上层组件的数据。

<template>
    <div class="retailer">
        <h2>零售商</h2>
        <h3>数量：{{ count }}</h3>
        <h3>品牌：{{ phone.brand }}</h3>
        <h3>型号：{{ phone.model }}</h3>
        <h3>价格：￥{{ phone.price }}</h3>
        <button @click="sell(1)">售卖一部</button>
    </div>
</template>

<script setup lang="ts">
import { inject } from 'vue';

// inject 的第二个参数是默认值
const { count, sell } = inject('inventory', { 
    count: 0, 
    sell: (value: number) => {} 
})
const phone = inject('phone', {
    brand: 'unknown',
    model: 'unknown',
    price: 0
})
</script>

<style scoped lang="scss">
.retailer {
    background-color: #F1F1F1;
    padding: 20px;
}
</style>
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

7> 执行命令 npm run dev 启动应用，浏览器访问：http://localhost:5173/，可见最底层组件已成功显示出来自最顶层组件的数据，点击 售卖一部 按钮观察顶层组件数据也跟随一起变化，说明顶层组件收到了来自底层组件的数据。

总结

• 使用 provide 和 inject 实现跨组件传数据与 $attrs 不同在于，不会影响处于中间位置的组件代码；
• 父组件使用 provide 函数向底层组件提供数据和接收底层组件数据的函数；
• 底层组件使用 inject 函数接收来自顶层组件的数据和向顶层组件发送数据的方法；
• inject 函数的第二个参数是默认值，当未收到来自顶层组件的对应数据时采用默认值。