开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第24天，点击查看活动详情

前言

在vue中父子组件通信方式有多种，但对于祖孙组件想要通信方便就要借助vuex或者依赖注入。下面我们来了解vue中依赖注入。

依赖注入

provide:提供传递注入的值，它接受两个参数：

参数名，这个参数名可以是一个symbol。
参数值，需要传递的值。 provide的ts类型如下：

   function provide<T>(key: InjectionKey<T> | string, value: T): void
   //InjectionKey类型如下:
   export interface InjectionKey<T> extends Symbol {}

InjectionKey继承于Symbol对象，所以参数名可以是一个Symbol。 inject:接受注入的值。我们通过provide往后代组件注入的值需要用inject来接收使用，它也有两个参数：

注入的参数名，需要跟provide设置的保持一致。inject取值遵循'就近原则'，当组件链上有相同的provide提供的key值，它会取离的最近的值。
默认值，可选，当匹配不到对应的参数名时使用设置的默认值。它也接受一个工厂函数，这时候需要注意，如果此时默认值是函数，那么后面必须再跟一个false参数。

   // 带有默认值 function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T

依赖注入就是provide注入、injiect接受使用，下面我们来做一个小案例：在父组件中注册子组件A，在A组件注册B组件。对于vue3我们可以安装unplugin-auto-import插件，它能自动帮我们import，非常好用。

//祖组件
    <template>
    <A></A>
    </template>
    <script setup lang="ts">
    import { provide } from 'vue';
    import A from './A.vue'
    const name = 'tpsz';
    provide('name', name);
    </script>
//孙组件
<template>
  <div>
    {{ name }}
  </div>
</template>
<script setup>
import { inject } from 'vue';
const name = inject('name');
</script>

QQ图片20230226224534.png inject还有以下两种接收方式；

   //设置默认值
   const age = inject('age', 18);
   //设置回调函数
   const sex = inject('inject',()=>{})

provide、inject需要在setup里面调用。

总结

当我们碰到嵌套比较深的组件链传参时，就选用provide与inject去传递参数，使用起来简单方便，注意inject取值遵循'就近原则'。

vue学习——依赖注入

前言

依赖注入

总结