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开发项目的时候，因需要使用到一个依赖jquery的第三方轮播图插件—— Ipresenter ，因此归纳了一个最为实用的在vue项目里引用jquery以及依赖jquery的第三方插件的方法，以下为具体使用方法。

安装jquery

新建一个vendor.js文件，再在组件里引入即可。

在需要使用的页面引入即可（如需全局引用只需要在main.js引入即可。），例如：

这样一来就成功的在vue项目里引入了jquery和依赖jquery的第三方插件。且无需配置webpack的plugins。

而且经测试发现即使通过配置webpack的plugins来引入了jquery，但是在引入插件的时候还是会报 jQuery is not defined 的错误，不信可以自己试试。

最终实现效果：

---