vue 初步了解provide/inject
provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。
需要注意的是 provide / inject这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
(这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。)
eg:
父组件中提供
provide() {
return {
map_nodeObj: { map_node: this.obj }
// 提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。
}
},
子组件中引入
inject: {
map_nodeObj: {
default: () => {
return {map_node: '0'}
}
}
},
使用: this.map_nodeObj.map_node
运行顺序:
data
provide
created // 在这个阶段$el还未生成,在这先处理privide的逻辑,子孙组件才可以取到inject的值
mounted
...
provide/inject的缺点:
这么做也是有明显的缺点的,在任意层级都能访问导致数据追踪比较困难,不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了,因此这个属性通常并不建议使用能用vuex的使用vuex,不能用的多传参几层,但是在做组件库开发时,不对vuex进行依赖,且不知道用户使用环境的情况下可以很好的使用
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
1.一般情况使用都是在app.vue配置为: provide () {return {isTest: this}}, 2.所有子组件都可以引用 拿到app.vue里面的所有数据 inject: ['i ...
- vue中的provide/inject讲解
最近在看element-ui的源码,发现了一个这样的属性:inject.遂查看官网provider/inject provider/inject:简单的来说就是在父组件中通过provider来提供变量 ...
- vue 组件传值$attrs $listeners $bus provide/inject $parent/$children
$attrs 包含了父作用域中不作为prop被识别的特性绑定,当一个组件没有声明props时,这里会包含所有父作用域的绑定, $listeneers 包含了父作用域中的v-on事件监听器,它可以通过v ...
- vue中使用provide和inject刷新当前路由(页面)
1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.rel ...
- vue高级组件之provide / inject
转载:https://blog.csdn.net/Garrettzxd/article/details/81407199 在vue中不同组件通信方式如下 1.父子组件,通过prop 2.非父子组件,通 ...
- 组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双向绑定数据
组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...
随机推荐
- eclipse插件svn图标详细含义
链接:http://pan.baidu.com/s/1qYSFfTq 密码:ez8p
- linux常用Java程序员使用命令(二)
出品人:北极的大企鹅 1. pwd 显示当前路径 2. cd 切换目录 . .. ~ 例如: cd /root 3. ls 显示文件(夹) -l 显示详细信息 -a 显示全部,包括隐藏文件(夹)(这个 ...
- java软件托盘显示中文出现框框乱码
目录 文章背景 目录 问题的代码 解决办法 说明 参考文章 版本记录 文章背景 测试代码时候突然发现代码运行时候的托盘菜单的名字显示异常,查询了下资料发现是运行参数的缘故. 目录 问题的代码 系统是w ...
- 杂谈之界面设计和UI测试 (一)
界面设计,是设计师的工作,UI测试,是测试人员的工作,UI测试究竟是测什么的?界面的排版布局?还是界面文字的书写错误?如果是排版布局,那么设计师该不会傻到设计一个看起来很不友好的界面,坐等测试人员发现 ...
- 团体程序设计天梯赛L1-022 奇偶分家 2017-03-22 17:48 81人阅读 评论(0) 收藏
L1-022. 奇偶分家 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 给定N个正整数,请统计奇数和偶数各有多少个? 输入格式 ...
- cxgrid取消过滤下拉框
选择tableview1.optionscustomize.columnfiltering=fasle;
- 在ie6下将png24图片透明
没想到IETester中IE6和IE6真实版本不一样...之前一直没有实现png图片的透明度,现在发现原来是版本不一样惹的祸.总之,我将解决方法以demo的方式显示出来,以供再次利用. <!DO ...
- Fiddler2抓包
https://www.cnblogs.com/conquerorren/p/8472054.html https://www.cnblogs.com/conquerorren/p/8472218.h ...
- sql字段操作
--删除第一位 substring(ftpMobile,2,len(ftpMobile)-1) --检查是否是数字 ISNUMERIC(ftpMobile) =0 含数字以外字符 ISNUMERIC ...
- jenkins+docker+docker machine 远程部署
dotnet publish -c Release docker build -t microtest:1.0 --build-arg microport=1000 -f "$WORKSPA ...