vue 中provide的用法_Vue中使用provide和inject
相信大家在工作中一定遇到过多层嵌套组件,而vue 的组件数据通信方式又有很多种。
比如vuex、$parent与$children、prop、$emit与$on、$attrs与$lisenters、eventBus、ref。
今天主要为大家分享的是provide和inject。
很多人会问,那我直接使用vuex不就行了吗?
vuex固然是好!
但是,有可能项目本身并没有使用vuex的必要,这个时候provide和inject就闪亮登场啦~
使我们开发的时候,如有神助~
官方解释
provide
选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的property。
inject
可以是一个字符串数组、也可以是一个对象
说白了,就是provide在祖先组件中注入,inject 在需要使用的地方引入即可。
我们可以把依赖注入看做一部分大范围的prop,只不过它以下特点:
祖先组件不需要知道哪些后代组件使用它提供的属性
后代组件不需要知道被注入的属性是来自那里
注意:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。
实例
目录结构
祖先
index.vue
爷爷级别 : {{ nameObj.name }} 今年 {{ age }}岁, 城市{{ city }}
改变名称
import child from '@/components/ProvideText/parent'
export default {
name: 'ProvideGrandPa',
components: { child },
data: function() {
return {
nameObj: {
name: '小布'
},
age: 12,
city: '北京'
}
},
provide() {
return {
nameObj: this.nameObj, //传入一个可监听的对象
cityFn: () => this.city, //通过computed来计算注入的值
age: this.age //直接传值
}
},
methods: {
changeName() {
if (this.nameObj.name === '小布') {
this.nameObj.name = '貂蝉'
this.city = '香港'
this.age = 24
} else {
this.nameObj.name = '小布'
this.city = '北京'
this.age = 12
}
}
}
}
.grandPa{
width: 600px;
height:100px;
line-height: 100px;
border: 2px solid #7fffd4;
padding:0 10px;
text-align: center;
margin:50px auto;
strong{
font-size: 20px;
text-decoration: underline;;
}
.blue{
color: blue;
}
}
复制代码
中间组件
parent.vue
父亲级别 : 只用作中转
import Son from './son'
export default {
name: 'ProvideParent',
components: { Son }
}
.parent{
height:100px;
line-height: 100px;
border: 2px solid #feafef;
padding:0 10px;
margin-top: 20px;
strong{
font-size: 20px;
text-decoration: underline;;
}
}
复制代码
后代组件
son.vue
孙子级别 : {{ nameObj.name }} 今年 {{ age }}岁, 城市{{ city }}
export default {
name: 'ProvideSon',
//inject 来获取的值
inject: ['nameObj', 'age', 'cityFn'],
computed: {
city() {
return this.cityFn()
}
}
}
.son{
height:100px;
line-height: 100px;
padding:0 10px;
margin: 20px;
border: 1px solid #49e2af;
strong{
font-size: 20px;
text-decoration: underline;;
}
.blue{
color: blue;
}
}
复制代码
我们来看一下运行结果。
图一:未点击【改变名称】按钮,原有状态
图二:已经点击【改变名称】按钮,更新后状态
大家可以对比一下前后差异。
会发现一个小细节。
无论我点击多少次,孙子组件的年龄age字段永远都是12并不会发生变化。
正是官网所提到的provide 和 inject 绑定并不是可响应的。这是刻意为之的。
所以大家使用的时候,一定要注意注入的方式,不然很可能无法实现数据响应。
希望今天的分享对你能有所帮助~
近期
vue 中provide的用法_Vue中使用provide和inject相关推荐
- vue 中provide的用法_vue 中的 provide 和 inject 用法
provider/inject:简单来说就是在父组件 provide 中提供变量,子组件 inject 中来注入,然后可以在子组件内部使用 provide 的变量 需要注意的是这里不论子组件有多深,只 ...
- vue 中provide的用法_Vue多级组件provide/inject使用详解
这次给大家带来Vue多级组件provide/inject使用详解,Vue多级组件provide/inject使用的注意事项有哪些,下面就是实战案例,一起来看一下. provide / inject 是 ...
- vue 中provide的用法_vue中provide和inject使用
1.provide/inject有什么用? 常用的父子组件通信方式都是父组件绑定要传递给子组件的数据,子组件通过props属性接收,一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读 ...
- 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( ...
最新文章
- Dell 2950服务器CPU-E1422错误解决方法
- 何为 Serverless 架构模式?这 5 大场景来告诉你!
- 十八、中断之独立按键
- loadRUnner常用函数
- MySQL服务迁移到opt_mysql文件*.opt *.frm *.MYI *.MYD的迁移
- P5502-[JSOI2015]最大公约数【分治】
- Hadoop 副本存储策略的源码修改和设置
- [Python笔记]第一篇:基础知识
- SilverLight中的基本图形(转)
- dpdk大页内存实现
- Tuxedo中间件常用命令
- 魔兽世界服务器修改模型,超简单魔兽世界修改模型 2.43可用 无需登录器
- MySQL的DECLARE...HANDLER使用
- 20P44 Premiere预设600个摄像机动画信号干扰调色视觉特效pr模板
- 大学医学院有计算机专业吗,上大学时辛苦一点,将来工作轻松一点,这些专业可以做到...
- 基于STM32的12864液晶理解
- 鸿蒙之至始于衣冠,学坊之声/Class Story | 孝老爱亲,我们这样做——双语303班蚂蚁学坊亲子活动...
- Python中range()函数用法
- kubernetes 对 rook 进行扩容
- LEARN TO DESIGN THE HEURISTICS FOR VEHICLE ROUTING PROBLEM翻译
热门文章
- 用天球星座测量地球表面经纬度的方法
- 最常见的几种手机快充方式和原理
- vue3.2+element-plus+ts节假日管理界面
- excle计算机基础测试,计算机基础测试题--Excel--雨课堂版本--手机版课件.pptx
- SAP BAPI_PRODORD_CREATE 参数带上销售订单号报 客户订单无CO对象 提示
- 手机双摄像头原理及产业解析----转载
- cdn部署php,Typecho博客全站部署腾讯云CDN教程
- 使用PS调整图片大小
- 我国古代数学家张丘建在《算经》一书中提出的数学问题:鸡翁一值钱五,鸡母一值钱三,鸡雏三值钱一。 百钱买百鸡,问鸡翁、鸡母、鸡雏各几何?
- VS2017登陆失败:我们无法刷新此账户的凭证、我们无法添加此账户发送请求时出错、评估期已结束,请登录以解除产品锁定