• Home
  • home > webfront > ECMAS > vue >

    Vue依赖注入：provide/inject

    Author：zhoulujun Date：

    通过provide inject可以轻松实现跨级访问祖先组件的数据，简单的来说, 父组件通过provide来提供变量, 然后在子组件中可以通过 inject来注入变量。但provide和inject数据不是响应的，改变的provide的数据，不会响应到inject注入的值

    父子组件交互方式多种，常用的有

    props(父组件向子组件传递数据)、$refs(对子组件的索引的引用，获取到在子组件定义的属性和方法)、$emit(事件冒泡到父组件)，bus总线(解决跨级和兄弟组件通信的问题,以使用一个空的Vue实列作为中央事件总线)、vuex、vue-router(parmas query)，及localStorage(localStorge之storage事件）,

    说实话，在vue，provide/inject用的非常少。觉得这个非常angular，但，angular中使用$provide来注册服务，然后使用$inject来注入注册的服务。但是vue这边，感觉跟依赖注入不沾边。个人用的非常少。但是还是记点笔记。

    provide/inject使用场景

    由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问祖先组件的数据

    provide 和 inject 主要是为高阶插件/组件库提供用例, 在应用程序代码中并不推荐使用。

    注意: 该两个属性是一起使用的。它允许一个祖先组件向其所有子孙后代组件注入一个依赖, 不论组件层次有多深。也就是说, 在我们的项目当中会有很多很多组件,并且嵌套的很深的组件, 我们的子孙组件想要获取到祖先组件更多的属性的话,那么要怎么办呢? 我们总不可能通过父组件一级一级的往下传递吧, 那如果真这样做的话, 那么随着项目越来越大, 我们的项目会越来越难以维护, 因此 provide 和 inject 出现了, 他们两个就是来解决这个事情的。

    provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

    • provide: 它是一个对象, 或者是一个返回对象的函数。里面它可以包含所有要传递给子孙组件的属性或属性值，使用对象模式的时候注意this的指向问题。

    • inject: 它可以是一个字符串数组或者是一个对象。属性值也可以是一个对象。

    • provide和inject数据不是响应的，改变的provide的数据，不会响应到inject注入的值；避免inject修改

    provide在生命周期中顺序

    1. beforeCreate

    2. data

    3. provide

    4. created

    5. mounted

    provide/inject项目实践

    简单的来说, 父组件通过provide来提供变量, 然后在子组件中可以通过 inject来注入变量。

    父组件——在祖先组件中 使用 provide 提供了所有需要传递给子组件甚至孙子组件的数据

    {
  name:'parentComp'
  data(){reture {}},
  provide(){
      reture{
        isShowA:true  
      }
  }
}

    子组件——通过inject这个来注入name属性进来, 因此在我们data中使用 this.name 就可以获取到我们祖先组件中的属性了

    {
  name:'childComp',
  inject:['isShowA'],
  mouted(){
      this.isShowA=false
  }
}

    这里可以通过inject直接访问其两个层级上的数据，其用法与props完全相同，同样可以参数校


    这么做也是有明显的缺点的，在任意层级都能访问导致数据追踪比较困难，不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了，因此这个属性通常并不建议使用能用vuex的使用vuex，不能用的多传参几层，但是在做组件库开发时，不对vuex进行依赖，且不知道用户使用环境的情况下可以很好的使用


    参考文章：

    vue系列---Vue组件化的实现原理 https://www.cnblogs.com/tugenhua0707/p/11761280.html

    vue中provide-inject跨多组件通讯 https://my.oschina.net/u/3407699/blog/3050076

    vue高级组件之provide / inject https://blog.csdn.net/Garrettzxd/article/details/81407199


    转载本站文章《 Vue依赖注入：provide/inject》,
    请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8408.html

    收藏
    上一篇：Vue-router 报NavigationDuplicated
    下一篇：vue源码 源码解读
    延伸阅读：