provide inject应用及和props对比
2024-08-23 17:46:00
之前本人写过几篇element ui源码解析,其中提到provide/inject,当时只是匆匆带过,没有做深入研究,直到后来一次开发,需要实现孙组件更改父组件的值才想起来,原来这一对属性有如此大的用途且相当方便,因此这里做个总结,顺便做个简单的DEMO。
PS:
下面提到的父组件,子组件,孙组件只是为了说明三个层级,方便大家理解而已
实现的场景如下:
1、三个组件:父组件,子组件,孙组件,父引用子,子引用孙
2、父组件有个属性:showDia。子组件,孙组件都可能更改这个属性的值,以实现父组件中某个弹窗显示隐藏
第一种实现方法:利用props
由于props只能实现向子组件传递参数不能实现直接向孙组件传递参数,因此每嵌套一级就需要手动传递参数,嵌套层次越深体验就越糟糕,有点像异步请求嵌套,简直是梦魇般的存在
// 父组件引用子组件,需要显式传值
<sonC :fromParentVal="showDia"></sonC> // 子组件引用孙组件,需要显式传值
<grandSonC :fromGrandSonVal="showDia"></grandSonC> // 孙组件要修改父组件showDia的值
this.$parent.$parent.showDia = !this.$parent.$parent.showDia
在孙组件中需要修改父组件值时,有几层嵌套就需要写几个$parent,这样做实在没水平
第二种实现方法:provide/inject
父组件只要提供provide,子组件和孙组件用inject注入即可,看代码
// 父组件提供this对象,供子孙组件注入
provide() {
return {
thisObj: this
}
} // 子组件注入
inject: ['thisObj'] // 孙组件注入
inject: ['thisObj'] // 孙组件修改父组件的值
this.thisObj.showDia = !this.thisObj.showDia
不管嵌套几级,修改父组件属性都是一样的写法,是不是相当方便
最新文章
- smartcrop.js智能图片裁剪库
- Bluemix中国版体验(一)
- [深度优先搜索] POJ 1426 Find The Multiple
- Surprise团队第四周项目总结
- 首届Ignite China微软技术大会见闻
- PosePlus的第一次突破
- IE浏览器bug罪魁祸首--hasLayout
- 无法解决 equal to 运算中 &;quot;Chinese_PRC_CI_AS&;quot; 和 &;quot;SQL_Latin1_General_CP1_CI_AS&;quot; 之间的排序规则冲突。
- java 写文本文件
- Scala的基本语法总结
- nutch fetcher.server.delay
- Android DatePickerDialog 只选择年月
- Storm csdn
- 简体中文 — ANSI Common Lisp 中文版
- HDU 5828 Rikka with Sequence
- JavaScript高级程序设计---学习笔记(一)
- 单选、多选框根据value值设置选中
- MySQL实现按天统计数据的方法
- 【原】Java学习笔记002 - JAVA SE编码规范
- 闪电侠 Netty 小册里的骚操作
热门文章
- 阿里巴巴Druid数据源组件
- RSA后台签名前台验签的应用(前台采用jsrsasign库)
- Ubuntu 安装最新版 (1.12) Golang 并使用 go mod
- Canal - 数据同步 - 阿里巴巴 MySQL binlog 增量订阅&;消费组件
- linux压缩 zip和unzip
- Windows 10提示你不能访问此共享文件夹,因为你组织的安全策略阻止未经身份验证的来宾访问
- Python中,我该如何切分字符串后保留分割符?
- Nginx修改时间戳
- windows安装boost
- mysql批量更新数据,循环select记录然后更新某一字段