唯品秀前端博客
当前位置: 前端开发 > Vue.js专区 > Vue.js中provide/inject的基本用法

Vue.js中provide/inject的基本用法

2019-07-04 分类:Vue.js专区 作者:管理员 阅读(135)

官方是这么解释的,provide / inject这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。其实这个东西,说通俗点,就是可以用来父辈们给祖孙传值,请看清楚,这里说的是可以隔代传值,传统的props只能父传子,不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据,这就是它最大的特性。

基本语法

1
2
provide 选项应该是:一个对象或返回一个对象的函数
inject 选项应该是:一个字符串数组,或 一个对象,对象的 key 是本地的绑定名

认真看清楚这两句话,然后来看下面示例。

父组件中提供
1
2
3
4
5
6
provide() {
    return {
      map_nodeObj: { map_node: this.obj }
      // 提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。
    }
  },
子组件中引入
1
2
3
4
5
6
7
8
  inject: {
    map_nodeObj: {
      default: () => {
        return {map_node: '0'}
      }
    }
  },
使用: this.map_nodeObj.map_node

上面inject就是对象,当然也可以是下面这样

1
2
3
4
inject: {
    inject: ['map_nodeObj']
    }
  },

代码执行顺序

1
2
3
4
5
data
provide
created  // 在这个阶段$el还未生成,在这先处理privide的逻辑,子孙组件才可以取到inject的值
mounted
...

小结

这么做也是有明显的缺点的,在任意层级都能访问导致数据追踪比较困难,不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了,因此这个属性通常并不建议使用能用vuex的使用vuex,不能用的多传参几层,但是在做组件库开发时,不对vuex进行依赖,且不知道用户使用环境的情况下可以很好的使用。因此,官方说provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。关于如何响应式,请看我另一篇文章Vue.js中provide / inject如何实现数据响应式

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(1) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
1

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

共有 0 条评论 - Vue.js中provide/inject的基本用法

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 220 篇
  • 草稿数目: 0 篇
  • 分类数目: 14 个
  • 独立页面: 6 个
  • 评论总数: 971 条
  • 链接总数: 13 个
  • 标签总数: 406 个
  • 建站时间: 950 天
  • 注册用户: 1417 人
  • 访问总量: 8708679 次
  • 最近更新: 2019年7月17日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线