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代码
Mar 01 Javascript
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 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中几种常见的超时处理全面总结
2012/09/11 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
jquery异步请求实例代码
2011/06/21 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
python类和继承用法实例
2015/07/07 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
python 数据类型强制转换的总结
2021/01/25 Python
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
自主招生教师推荐信
2014/05/10 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL