Vue privide 和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"
   }
   //...
  }

Vue privide 和inject 依赖注入的使用详解_第1张图片

项目案例

父组件

项目最外层的布局组件layout.vue


 

Vue privide 和inject 依赖注入的使用详解_第2张图片

这里就是我们说的provide,向下提供信息,这里提供的是当前的vue实例,相当于给了后代一个接口。

这样在任何的后代组件中,都可以使用inject选项来接收指定的我们想要添加在这个实例上的属性。

子组件

layout.vue 组件内的router-view 可能路由进来很多其它子孙组件,比如order.vue


                    
                    

你可能感兴趣的:(Vue privide 和inject 依赖注入的使用详解)