vue3探索——组件通信之依赖注入

背景

通常情况下，当我们需要从父组件向子组件传递数据时，会使用 props。想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦：

对于这种组件使用结构，vue3给我们提供了另外一种传参方式，那就是依赖注入。一个父组件相对于其所有的后代组件，会作为依赖提供者(provide)。任何后代的组件树，无论层级有多深，都可以注入(inject)由父组件提供给整条链路的依赖。

基础使用

依赖提供者provide()

provide的使用非常简单，下面给出代码。

<script setup lang="ts">
// 1-引入
import { ref, provide } from 'vue';

const param = ref();

// 2-使用
provide('mark', param);
</script>

provide()函数需要传入两个参数：

• 第一个参数被称为注入名，可以是一个字符串或是一个 Symbol。后代组件会用注入名来查找期望注入的值。一个组件可以多次调用 provide()，使用不同的注入名，注入不同的依赖值。
• 第二个参数是提供的值，值可以是任意类型，包括响应式的状态，比如一个 ref。提供的响应式状态使后代组件可以由此和提供者建立响应式的联系。

增强功能：除了在一个组件中提供依赖，我们还可以在整个应用层面提供依赖，类似于vue2中挂载在vue实例的原型对象上：

import { createApp } from 'vue'

const app = createApp({})

app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!')

在应用级别提供的数据在该应用内的所有组件中都可以注入。这在你编写插件时会特别有用，因为插件一般都不会使用组件形式来提供值。

注入inject()

要注入上层组件提供的数据，需使用 inject() 函数：

<script setup lang="ts">
// 1-引入
import { inject } from 'vue';

// 2-使用
const param = inject('mark');
// 第二个参数可以设置注入**默认值**，防止祖先组件没有提供依赖而造成报错
const param2 = inject('mark2', '默认值');
</script>

注意，不使用<script setup> 的话，需要在setup()函数中使用provide()和inject()。

import { provide } from 'vue'

export default {
  setup() {
    provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
  }
}

import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}

实战

// src/App.vue
<template>
    <div class="dad">
        <!-- 1000元 -->
        <h1>我是父组件，我有{{ money }}元</h1>
        <!-- 使用子组件 -->
        <son />
    </div>
</template>

<script setup lang="ts">
// 引入子组件
import son from './components/son.vue';
// 引入vue API
import { ref, provide } from 'vue';

// 1-父组件响应式数据
const money = ref(1000);

// 向后面的组件提供依赖
provide('Pmoney', money);
</script>

<style lang="scss" scoped>
.dad {
    width: 600px;
    height: 600px;
    background-color: skyblue;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>

// src/components/son.vue
<template>
    <div class="son">
        <h2>我是子组件</h2>
        <!-- 使用孙组件 -->
        <grandson />
    </div>
</template>

<script setup lang="ts">
// 引入孙组件
import grandson from './grandson.vue';
</script>

<style lang="scss" scoped>
.son {
    height: 400px;
    width: 400px;
    background-color: pink;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>

// src/components/grandson.vue
<template>
    <div class="grandson">
        <h3>我是孙组件，我爷爷有{{ money }}元</h3>
    </div>
</template>

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

// 2-注入祖先组件的依赖
const money = inject('Pmoney');
</script>

<style lang="scss" scoped>
.grandson {
    width: 200px;
    height: 200px;
    background-color: aqua;
}
</style>