铁雪资源网 Design By www.gsvan.com

最近看源码有一段对于整合参数的代码,

normalizeProps(child, vm)
 normalizeInject(child, vm)
 normalizeDirectives(child)

想象里边的Inject很少用到,所以查了一下资料,

通常组件传参是有两种情况

  1. 父子组件进行传参,这时候通常利用props
  2. 非父子组件传参,这时候一般利用vuex

会有一种情况隔代组件传参,这时候可以利用props一层一层传递下去,但是代码就比较乱了

所以就有了 provide/inject 进行隔代组件传递

父组件

<template>
  <div class="test">
    <son></son>
  </div>
</template>
<script>
export default {
  name: 'Test',
  provide: {
    name: 'Garrett'
  }
}
</script>

子组件

<template>
  <div>
    {{name}}
  </div>
</template>
 
<script>
export default {
  name: 'Garrettson',
  inject: [name]
}
</script>

对于使用场景,基础组件应该使用props,我个人觉得一般用于比较复杂业务,提供基础数据,比如最近的基金详情页。可以直接在最顶层提供基金的基本信息,然后子组件都可以访问的到,不用每个单独提供detail的props 属性。

PS:vue学习- provide / inject

1、解释

provide / inject这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

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

2、示例

父组件中提供

 provide() {
  return {
   map_nodeObj: { map_node: this.obj }
   // 提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。
  }
 },

子组件中引入

 inject: {
  map_nodeObj: {
   default: () => {
    return {map_node: '0'}
   }
  }
 },

使用: this.map_nodeObj.map_node

3、运行顺序

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

总结

以上所述是小编给大家介绍的vue中的inject学习教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

标签:
vue,inject

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

评论“vue中的inject学习教程”

暂无vue中的inject学习教程的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。