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 相关文章推荐
jqeury eval将字符串转换json的方法
Jan 20 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
javascript实现简易数码时钟
Mar 30 Javascript
JavaScript中的Proxy对象
Nov 27 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数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
python实现井字棋游戏
2020/03/30 Python
python中的global关键字的使用方法
2019/08/20 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
生产部经理岗位职责
2013/12/16 职场文书
运动会通讯稿100字
2014/01/31 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
农林环境专业求职信
2014/03/13 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
医院志愿者活动总结
2015/05/06 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫