Vue scoped及deep使用方法解析


Posted in Javascript onAugust 01, 2020

众所周知,在组件中给style 标签添加属性 scoped 属性可以避免组件内样式对外界造成污染,scoped使得组件内的样式变成局域样式,只作用于当前组件。

原理如下-------

在编译组件的时候,如果当前组件内style标签上有scoped属性,那么会在当前所有标签上添加一个【data-v-hash】属性,而当前样式表内的所有末尾选择器后面也会加上该属性,那么就使得当前组件内的样式只会作用于当前组件内的元素。值得注意的是,当父组件,子组件同时使用scoped属性时,子组件最外层的标签既会被加上当前组件的hash值,又会加上父级组件的hash值,像这样

//子组件最外层标签
<div data-v-b45036b2 data-v-384b136e ></div>

但是有个问题------

在我们用scoped的时候回发现一个问题,就是我们在当前组件内使用的scoped,但是我想在当前组件内改变子组件的样式(非最外层标签),的时候会发现不好使。

<style scoped>
.father-div .child-div{color:red;}
</style>

因为到了浏览器上会解析成

<div data-v-384b136e ></div> 

不好使的原因是应为父组件内样式内解析的是父组件的hash值,而子组件内标签上添加的是子组件的hash值,对应不上当然没效果,那怎么解决呢?

使用deep------

当遇到这种困扰的时候我们可以另写一个style标签,然后不加scoped属性,来盖子组件的样式,当前这么写是可以的,但是不太优雅,这时我们可以用到/deep/属性,

.father-div /deep/ .child-div{color:red;}

当遇到"/deep/"的时候会将"/deep/"的位置替换成组件的hash值,解析成

.father-div[data-v-b45036b2] .child-div{color:red;}

这样只需要注意css的权重就可以覆盖子组件内的样式了,

注意:子组件内最外层的样式由于是带了父子组件的两个hash值,所以是会被两头控制的,不需要/deep/就可以在父组件内覆盖样式

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript类和继承 constructor属性
Mar 04 Javascript
小试JQuery的AutoComplete插件
May 04 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
js实现简单选项卡功能
Mar 23 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
Vue中computed及watch区别实例解析
Aug 01 #Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 #Javascript
vue 组件简介
Jul 31 #Javascript
three.js 制作动态二维码的示例代码
Jul 31 #Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 #Javascript
vue抽出组件并传值实例
Jul 31 #Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 #Javascript
You might like
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
python re正则表达式模块(Regular Expression)
2014/07/16 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
python的pstuil模块使用方法总结
2019/07/26 Python
python模块导入的方法
2019/10/24 Python
python操作cfg配置文件方式
2019/12/22 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
请解释virtual关键字的含义
2015/06/17 面试题
精彩的大学生自我评价
2013/11/17 职场文书
会计出纳员的自我评价
2014/01/15 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
五一促销活动总结
2014/07/01 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
python中的None与NULL用法说明
2021/05/25 Python
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis
python热力图实现的完整实例
2022/06/25 Python
python数字图像处理:图像简单滤波
2022/06/28 Python
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL