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 相关文章推荐
JS input 数字验证代码
Jul 30 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
Javascript编写2048小游戏
Jul 07 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
JavaScript命名空间模式实例详解
Jun 20 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
详解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
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
PHP5中虚函数的实现方法分享
2011/04/20 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
JavaScript中Function详解
2015/02/27 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
复制粘贴功能的Python程序
2008/04/04 Python
Python中变量交换的例子
2014/08/25 Python
在Python中使用第三方模块的教程
2015/04/27 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
python 实现单通道转3通道
2019/12/03 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
super()与this()的区别
2016/01/17 面试题
给医务人员表扬信
2014/01/12 职场文书
十八大闭幕感言
2014/01/22 职场文书
企业员工薪酬方案
2014/06/04 职场文书
2014年党建工作总结
2014/11/11 职场文书
2014年政教处工作总结
2014/12/20 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python
Python实现视频自动打码的示例代码
2022/04/08 Python