vue 中provide的用法_vue中provide和inject使用
1、provide/inject有什么用？
常用的父子组件通信方式都是父组件绑定要传递给子组件的数据，子组件通过props属性接收，一旦组件层级变多时，采用这种方式一级一级传递值非常麻烦，而且代码可读性不高，不便后期维护。
vue提供了provide和inject帮助我们解决多层次嵌套嵌套通信问题。在provide中指定要传递给子孙组件的数据，子孙组件通过inject注入祖父组件传递过来的数据。
其实，provide 和 inject主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。比如elementUI组件库中：
在el-form组件中将组件实例暴露给子孙组件
在el-form-item组件中注入el-form组件实例，然后就可以使用el-form组件实例的方法、变量等等。
为什么不使用父子组件props传值呢？
因为父子组件props传值需要需要知道往哪一个子组件传值，而el-form组件中使用的子组件是确定的，是根据不同的需求定的。provide只需要将传递的值抛出，不需要知道使用哪一个子组件，子组件通过inject注入获取数据，也不需要知道父组件是谁，因此再封装组件库的时候很便利。
不推荐直接使用在应用程序代码中是因为数据追踪比较困难，不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了。
2、provide/inject使用方式
provide：是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。注意：子孙层的provide会掩盖祖父层provide中相同key的属性值
inject：一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值，from是在可用的注入内容中搜索用的 key (字符串或 Symbol)，意思就是祖父多层provide提供了很多数据，from属性指定取哪一个key;default指定默认值。
3、例子
provide + inject
Vue.component('A', {
template: `
`,
provide: {
msg: '1234124'
}
})
Vue.component('B', {
template: `
B:
{{ this.msg }}
`,
provide: {
msg: '42341234',
name: 'asdasda'
},
inject: ['msg'],
})
Vue.component('C', {
template: `
C:
{{ this.xingming }}
{{ this.msg }}
`,
inject: {
xingming: {
from: 'name',
default: ''
},
msg: {
from: 'msg',
default: ''
}
},
data() {
return {
}
},
})
var app=new Vue({
el: '#app',
template: `
`
});
结果：
vue 中provide的用法_vue中provide和inject使用相关推荐
- vue 中provide的用法_Vue中使用provide和inject
相信大家在工作中一定遇到过多层嵌套组件,而vue 的组件数据通信方式又有很多种. 比如vuex.$parent与$children.prop.$emit与$on.$attrs与$lisenters.e ...
- vue 中provide的用法_vue 中的 provide 和 inject 用法
provider/inject:简单来说就是在父组件 provide 中提供变量,子组件 inject 中来注入,然后可以在子组件内部使用 provide 的变量 需要注意的是这里不论子组件有多深,只 ...
- vue 中provide的用法_vue中provide和inject的用法
2.2.0 新增 描述: provide 和 inject 主要为高阶插件/组件库提供用例.并不推荐直接用于应用程序代码中; 并且这对选项需要一起使用; 以允许一个祖先组件向其所有子孙后代注入一个依赖 ...
- vue 中provide的用法_vue中的provide和inject
阅读element-ui源码,发现在设计子组时件用到了inject属性,随即查了一下官方文档,得知vue在2.2.0版本里新增了provide / inject: provide 和 inject 主 ...
- 中provide的用法_Vue中那些你不知道的作用域
作用域控制可以使用哪些变量以及在何处使用.它控制它们对应用程序的不同部分的"可见性".了解 Vue 提供的作用域级别之间的差异会帮助我们编写更清晰的代码. 下面是 vue 中4个级 ...
- vue中this.init用法_Vue中的this.$options.data()和this.$data用法说明
问题 项目里遇到一个问题,用this.$options.data()重置组件data时,data()里用this获取的props或method都为undefined,代码简化如下: export de ...
- python中change的用法_vue中select的使用、默认选择、onchange/change事件等操作实例
Select选择框极其值获取,默认选择 编程语言: {{language.desc}} var app = new Vue({ el: "#app", data: { langua ...
- mysql中去重的用法_mysql中去重 distinct 用法
在使用MySQL时,有时需要查询出某个字段不重复的记录,这时可以使用mysql提供的distinct这个关键字来过滤重复的记录,但是实际中我们往往用distinct来返回不重复字段的条数(count( ...
- python中readlines函数用法,python中read() readline()以及readlines()用法
我们谈到"文本处理"时,我们通常是指处理的内容.Python 将文本文件的内容读入可以操作的字符串变量非常容易.文件对象提供了三个"读"方法: .read(). ...
最新文章
- Morph 3D拥有近千名艺术家，欲打造全球最大的VR虚拟化身服装库
- c语言return 11,二级C语言教程章节测试11.对函数的进一步讨论
- js中的数组对象排序(方法sort()详细介绍)
- 中文 Python 开源资料合集！这应该是最全的了！
- TransactionAwareDataSourceProxy
- 自己搭建的邮件系统不能发往gmail、hotmail等问题解决
- vs code html table,vs Code 快速生成代码
- HTTP家族详细讲解
- 自学python能干些什么副业-她把摄影当副业：月薪3000，副业收入上万
- linux远程仿真,11.5 仿真的远程桌面系统： XRDP 服务器
- Ffplay视频播放流程
- Jmeter的面试题集
- word自动生成目录和调整页码字体的方法
- 解决mysql登录出现10061的问题
- java 习题_【精选】Java习题Java习题.pdf
- boost库中thread多线程中的thread_specific_ptr
- android 自定义indicator,【Android】TabLayout 自定义指示器 Indicator 样式
- u盘中毒文件为html文档,u盘中毒文件被隐藏怎么办【解决方法】
- BDP荧光染料BODIPY FL-PEG2-COOH/carboxylic acid/羧基羧酸，Ex/Em(nm)503/509
- 一. pandas入门介绍(一)