vue中的provide/inject的学习使用


Posted in Javascript onMay 09, 2018

前言

最近在看element-ui的源码,发现了一个这样的属性:inject.遂查看官网provider/inject

provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。

需要注意的是这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

下面我们来验证下猜想:

first:定义一个parent component

<template>
 <div>
<childOne></childOne>
 </div>
</template>

<script>
 import childOne from '../components/test/ChildOne'
 export default {
  name: "Parent",
  provide: {
   for: "demo"
  },
  components:{
   childOne
  }
 }

在这里我们在父组件中provide for这个变量。

second 定义一个子组件

<template>
 <div>
  {{demo}}
  <childtwo></childtwo>
 </div>
</template>

<script>
 import childtwo from './ChildTwo'
 export default {
  name: "childOne",
  inject: ['for'],
  data() {
   return {
    demo: this.for
   }
  },
  components: {
   childtwo
  }
 }
</script>

third 定义另一个子组件

<template>
 <div>
  {{demo}}
 </div>
</template>

<script>
 export default {
  name: "",
  inject: ['for'],
  data() {
   return {
    demo: this.for
   }
  }
 }
</script>

在2个子组件中我们使用jnject注入了provide提供的变量for,并将它提供给了data属性。

这里官网注明例子只工作在 Vue 2.2.1 或更高版本。低于这个版本时,注入的值会在 props 和 data 初始化之后得到。

运行之后看下结果

vue中的provide/inject的学习使用

从上面这个例子可以看出,只要在父组件中调用了,那么在这个父组件生效的生命周期内,所有的子组件都可以调用inject来注入父组件中的值。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
csdn 批量接受好友邀请
Feb 19 Javascript
javascript 年月日联动实现核心代码
Dec 21 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 #Javascript
自定义vue组件发布到npm的方法
May 09 #Javascript
React Navigation 使用中遇到的问题小结
May 08 #Javascript
官方推荐react-navigation的具体使用详解
May 08 #Javascript
JavaScript callback回调函数用法实例分析
May 08 #Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 #Javascript
vue-cli 引入、配置axios的方法
May 08 #Javascript
You might like
修改php.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
详解微信UnionID作用
2019/05/15 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
vc6编写python扩展的方法分享
2014/01/17 Python
Python字符串处理之count()方法的使用
2015/05/18 Python
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
Python中django学习心得
2017/12/06 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
python 中如何获取列表的索引
2019/07/02 Python
解决python对齐错误的方法
2020/07/16 Python
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
新学期班主任寄语
2014/01/18 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
作风建设演讲稿
2014/05/23 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
员工教育培训协议书
2014/09/27 职场文书
南湾猴岛导游词
2015/02/09 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书