Vue 3 的依赖注入 provide / inject 用法_vue3 inject

1.什么是依赖注入

依赖注入（DI）是一种非常常见的跨组件传递数据的方法，它可以帮助我们更好地管理组件之间的依赖关系。在没有依赖注入机制之前，祖孙组件之间通信需要逐层往深层组件进行传递，导致链路很长；引入依赖注入机制后，只需要在父组件提供（provide）依赖，任何层级的后代组件注入该依赖即可。

引入依赖机制前：

引入依赖机制后：

2.provide() 和 inject()

provide(name, value)通常在父组件使用。该函数接收 2 个参数，参数name为注入的key，可以是字符串或者 Symbol，子组件通过该值来注入。参数value为需要注入的依赖值，可以是任何类型的值。

• 在父组件中使用 provide 标记该变量可以被所有后代访问，无论多少层

function provide<T>(key: InjectionKey<T> | string, value: T): void;

inject(key,defaultValue,treatDefaultAsFactory)常在子组件使用，注入一个由父组件或整个应用 (通过 app.provide()) 提供的值。

参数 key 为父组件提供值的 key；

参数defaultValue为可选参数，作为依赖的默认值，可以是具体的值，也可以是函数，来创建复杂的值；

参数treatDefaultAsFactory也是可选值，当 defaultValue为函数时，需要设置treatDefaultAsFactory为 false，表明这个函数是默认值，而不是工厂函数。

• 在子组件中使用 inject 可以访问到变量

// 没有默认值
function inject<T>(key: InjectionKey<T> | string): T | undefined;
 
// 带有默认值
function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T;
 
// 使用工厂函数
function inject<T>(
  key: InjectionKey<T> | string,
  defaultValue: () => T,
  treatDefaultAsFactory: true
): T;

2.1.provide() 注入名为 Symbol 类型 

使用provide(name, value)，name参数可以支持不同类型的值，包括：

• 字符串：如 provide('name', 'Chris')；
• Symbol：如 provide(Symbol(), 'Chris')，当我们在开发大型且依赖多的应用时，可以使用 Symbol类型作为注入名，「避免冲突」；

// key.ts
import type { InjectionKey } from "vue";
export const symbolStringKey = Symbol() as InjectionKey<string>;
 
// 父组件
import { provide } from "vue";
import { symbolStringKey } from "./key";
provide(symbolStringKey, "Chris");
 
// 子组件
import { inject } from "vue";
import { symbolNumberKey } from "./key";
const symbolNumber = inject(symbolNumberKey);

3.示例

在父组件中使用 provide('name', 'Chris') 提供了一个注入名为 name 的值，值为 'Chris'。在子组件中使用 inject('name', 'defaultName')注入这个值，并赋值给变量 name，添加到模版中。

<!-- 父组件 -->
<template>
  <child-component></child-component>
</template>
<script setup lang="ts">
import { provide } from "vue";
provide("name", "Chris");
</script>
 
<!-- 子组件 -->
<template>
  <div>name: {{ name }}</div>
</template>
<script setup lang="ts">
import { inject } from "vue";
const name = inject("name", "defaultName");
</script>

 4.参考链接

详细聊一聊 Vue3 依赖注入 - 知乎 (zhihu.com)

Vue 3 的 provide / inject 用法 - 掘金 (juejin.cn)