vue中的provide/inject讲解
最近在看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 初始化之后得到。
运行之后看下结果
从上面这个例子可以看出,只要在父组件中调用了,那么在这个父组件生效的生命周期内,所有的子组件都可以调用inject来注入父组件中的值。
vue中的provide/inject讲解的更多相关文章
- vue中的provide/inject的学习
在 Vue.js 的 2.2.0+ 版本中添加加了 provide 和 inject 选项.用于父级组件向下传递数据.provide/inject:简单的来说就是在父组件(或者曾祖父组件)中通过pro ...
- 在vue中使用[provide/inject]实现页面reload
在vue中实现页面刷新有不同的方法: 如:this.$router.go(0),location.reload()等,但是或多或少会存在问题,如页面会一闪等 所以建议使用[provide/inject ...
- vue中的provide/inject的学习使用
irst:定义一个parent component ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <template> <div> ...
- vue中的provide和inject
vue中的provide和inject:https://blog.csdn.net/viewyu12345/article/details/83011618
- vue中使用provide和inject刷新当前路由(页面)
1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.rel ...
- vue 初步了解provide/inject
provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量. 需要注意的是 provide / inject这对选项需要一起使用, ...
- vue 高阶 provide/inject
1.一般情况使用都是在app.vue配置为: provide () {return {isTest: this}}, 2.所有子组件都可以引用 拿到app.vue里面的所有数据 inject: ['i ...
- 054——VUE中vue-router之实例讲解定义一下单页面路由
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 聊聊 Vue 中 provide/inject 的应用
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
随机推荐
- Spring基础07——配置集合属性
1.集合属性 在Spring中可以通过一组内置的xml标签(例如<list>,<set>或<map>)来配置集合属性. 2.配置List集合 配置java.util ...
- 用doxygen+graphviz生成函数调用流程图
https://www.jianshu.com/p/fe4b6b95dca5 注意点:由于使用到了Graphviz,所以要设置Dot选项,勾选HAVE_DOT,并设置DOT_PATH为Graphviz ...
- [Comet OJ - Contest #9 & X Round 3] Namid[A]me
传送门 一开始读错题了,以为是\(\sum_{1\leq u\leq v\leq n}f(u,v)\),还疑惑这题这么简单怎么没人做( 实际上是\(\sum_{1\leq u\leq v\leq n} ...
- 28.密码学知识-hash函数-5——2019年12月19日
5. 单向散列函数 "单向散列函数 --- 获取消息的指纹" 在刑事侦查中,侦查员会用到指纹.通过将某个特定人物的指纹与犯罪现场遗留的指纹进行对比,就能够知道该人物与案件是否存在关 ...
- 【NOIP2016提高A组8.11】钱仓
题目 分析 发现,一定有一个点作为起点,所有的路径都不经过这个起点. 接着贪心求答案, 如果\(c_i>1\),将其中\(c_i-1\)个钱往后"铺". 易证\(x^2+y^ ...
- HBase设计规范(转载)
在这里讲什么设计规范实在是有些不知天高地厚,毕竟笔者本人也只是一个大数据技术的初学者,断然不敢制订什么设计规范的,所以请原谅我的狂妄,这个设计规范,只是本人对自己制订的,与别人无关. 之前,HBase ...
- font-size:0; 消除空白间隙
使用font-size:0解决设置inline-block引起的空白间隙问题 一.空白间隙问题 在进行页面布局的时候为了页面代码所谓整洁刻度,往往会设置缩进或是换行,但是元素display为inlin ...
- 在 Postman 中报错:Self-signed SSL certificates are being blocked 的分析与解决
http://www.shuijingwanwq.com/2019/02/18/3171/
- Linux内核设计与实现 总结笔记(第十二章)内存管理
内核里的内存分配不像其他地方分配内存那么容易,内核的内存分配不能简单便捷的使用,分配机制也不能太复杂. 一.页 内核把页作为内存管理的基本单位,尽管处理器最小寻址坑是是字或者字节.但是内存管理单元MM ...
- Oracle In子句
Oracle In子句 作者:初生不惑 Oracle基础 评论:0 条 Oracle技术QQ群:175248146 在本教程中,您将学习如何使用Oracle IN运算符来确定值是否与列表或子查询中的任 ...