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 相关文章推荐
javascript实现的HashMap类代码
Jun 27 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
微信小程序开发探究
Dec 27 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
原生JS进行前后端同构
Apr 22 Javascript
Vuex的热更替如何实现
Jun 05 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作的文本留言本的例子(一)
2006/10/09 PHP
php 生成WML页面方法详解
2009/08/09 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
python str与repr的区别
2013/03/23 Python
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
Python入门之后再看点什么好?
2018/03/05 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
Python中and和or如何使用
2020/05/28 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
高级护理专业毕业生推荐信
2013/12/25 职场文书
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
建议书标准格式
2014/03/12 职场文书
员工保密协议书
2014/09/27 职场文书
个人查摆剖析材料
2014/10/16 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
浅谈Python中的正则表达式
2021/06/28 Python