vue中的inject学习教程


Posted in Javascript onApril 24, 2019

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

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学习教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
WordPress JQuery处理沙发头像
Jun 22 Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
前台js调用后台方法示例
Dec 02 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
解析vue中的$mount
Dec 21 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
浅谈Webpack多页应用HMR卡住问题
Apr 24 #Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 #Javascript
vue模仿网易云音乐的单页面应用
Apr 24 #Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 #Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 #Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 #Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 #Javascript
You might like
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
php生成二维码
2015/08/10 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
javascript 树控件 比较好用
2009/06/11 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
python 域名分析工具实现代码
2009/07/15 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
python操作文件的参数整理
2019/06/11 Python
python调用自定义函数的实例操作
2019/06/26 Python
python+tkinter实现学生管理系统
2019/08/20 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
工程专业应届生求职信
2014/02/19 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
公司合作意向书范文
2014/07/30 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
管辖权异议上诉状
2015/05/23 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python