vue的依赖注入

使用场景

当组件嵌套过多，而且所有组件都需要使用根组件(包括但不限于)的某一些内容时（数据或方法），使用依赖注入会比普通的传值更加方便

使用

然后在任何子组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性：

相比于$parent，选择依赖注入的好处

使用依赖注入可以让我们免于暴露整个根组件信息，具体有两点

祖先组件不需要知道哪些后代组件使用它提供的属性

后代组件不需要知道被注入的属性来自哪里

当组件嵌套过多，而且所有组件都需要使用根组件(包括但不限于)的某一些内容时（数据或方法），使用依赖注入会比普通的传值更加方便

使用

// 官方示例

// 依赖注入一个getMap方法

provide: function () {

return {

getMap: this.getMap

}

}

原文链接： https://www.jianshu.com/p/8ca83311d752

我们在使用vue写项目的时候，偶尔会遇到这种情况：

组件A里面嵌套了组件B，组件B里面又嵌套了组件C，然后由于业务需要，我们需要在组件C里面访问组件A的数据或者方法。

我们的处理办法一般是：

但是这些方法总是不够高效，没内味。

针对这种组件嵌套的问题，Vue提供了一个解决方案——依赖注入[provide/inject]，由父组件定义一个可供全部后代组件访问的方法或者变量，子组件在组件内声明好需要使用的属性或者方法后即可直接调用。

虽然这里叫依赖注入，但是跟大部分人认知的Class的依赖注入还是有点区别的，这里更多的是指建立一个上下文关系，不过主要的思想还是

在A组件处通过provide属性，提供需要给后代使用的方法，C组件在inject处声明好自己需要的方法名，然后直接调用，通过依赖注入的方式实现跨层级方法的调用

vue-依赖注入

下载的离线插件下载引入vue环境中。

1、找到src文件夹下的mainjs文件，该文件可以用来定义全局的变量或方法。

2、引入组件。

3、在引入插件时会报没有该插件的错误，可根据抛出的错误信息进行下载插件vue。

---