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控制iframe滚动的代码
Apr 10 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
vue无限轮播插件代码实例
May 10 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
详解微信小程序动画Animation执行过程
Sep 23 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
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中mysql_field_type()函数用法
2014/11/24 PHP
php生成shtml类用法实例
2014/12/09 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
使用Python下载Bing图片(代码)
2013/11/07 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
灵泰克Java笔试题
2016/01/09 面试题
留学推荐信怎么写
2014/01/25 职场文书
身边的榜样活动方案
2014/08/20 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
小学中等生评语
2014/12/29 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
Python实现老照片修复之上色小技巧
2021/10/16 Python
基于redis+lua进行限流的方法
2022/07/23 Redis