这是我参与「第四届青训营」笔记创作活动的第N天

前言

在Vue中，我们在组件通信的时候，常常会使用Props，$emit，ref等方法来完成组件间的通信，但这些方法大部分都需要我们一层一层地传递数据及方法，就比如要传递给孙组件，我们必须这样父组件 -> 子组件 -> 孙组件，当我们有多代的组件时，使用这些方法实现组件间通信就会很麻烦，而在青训营的项目中我们也遇到了这样的问题，便使用了provide和inject属性，而这样的方式，也叫做依赖注入。

什么是依赖注入

官网说明是这样的：一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。

简单的来说，就是我们可以在父组件中的provide属性中，以键值对的形式放入其中，后代组件便可以通过inject属性，用其 key 为注入名查找期望注入的值，属性的值就是要提供的数据，我们可以在data()中访问到注入的值，依赖注入也被叫做解耦的大杀器。

例：

在完成青训营项目时，我们先在主页面index.vue提供了数据，这里提供了vue组件的实例，相当于一个接口。

之后便在其后代组件中直接使用inject属性通过key值chontrol获得了注入的值

用这样的方法，在任何的后代组件中，都可以使用inject选项来接收指定的我们想要添加在这个实例上的属性，大大提高了效率。

注意点

注意

1.依赖注入只能在父子组件中使用，同级组件不可。

2.inject/provide只能在setup运行期间使用,也可以在生命周期钩子中使用。

依赖注入中，父组件是不知道声明的内容会被哪个后代组件使用，而子组件也不知道内容是在哪被定义的。所以依赖注入只应用于业务功能单一的组件中，如果一个组件包含各种各样来自不同父组件的依赖的话，将会变得十分难以管理（毕竟子组件不知道这些方法是在哪里声明的），官方建议是用于高阶插件、组件库使用，不适宜普通应用代码。

tips：当我们使用provide return的方法传值时，后代组件没法接收到最新的值的时候，我们可以把provide变成⼀个箭头函数，然后在后代组件中通过执⾏这个函数的⽅式拿到函数返回的结果就可以拿到最新的值，间接变成了响应式的了.

例

父组件中：

provide:() => {
    return {
        Name:this.Name
        }
    }
    
子组件中：

inject:["Name"]
create(){
    console.log(this.Name())
    }

总结

依赖注入是一个很好用的工具，是解决组件之间的通信问题的利器，不受层级结构的限制，但其主要还是用于高阶插件以及组件库，不推荐直接应用于应用程序代码。

Vue中的依赖注入

前言

什么是依赖注入

注意点

总结