Vueprivide和inject依赖注入的使用详解

目录

前言示例项目案例子组件

前言

关于Vue组件的通讯方式如下：

父子组件：通过prop，$ emit，【$ root，$ parent，$ children】；非父子组件：vuex，父子层层传递、中央事务总线bus，$ref。

vue官网建议，在正常情况下，上述方式已经能满足绝大多数甚至所有的业务需求，对于应用程序代码应优先使用它们处理。然而，还有一种主要为 高阶插件/组件库 提供的用例办法，即 provide / inject （这对选项需要一起使用）。
from表示在可用的注入内容中搜索用的 key，default当然就是默认值。

示例

// 父级组件提供'foo'
var Provider = {
  provide:{
    foo:'bar'
   },
   //...
  }
子组件注入'foo'
var Child = {
   inject:['foo'],
   created(){
    console.log(this.foo) // =>"bar"
   }
   //...
  }