理解Vue中的scoped实现原理及穿透方法 vue less不能修改第三方组件样式
何为scoped
在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化。
scoped实现原理
<style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template>
<style> .example[data-v-5558831a] { color: red; } </style> <template> <div class="example" data-v-5558831a>hi</div> </template>
PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性,然后,给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom,这种做法使得样式只作用于含有该属性的dom——组件内部dom
为什么需要穿透scoped
scoped看起来很美,但是,在很多项目中,会出现这么一种情况,即:引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式,穿透scoped。
白话就是说,比如你使用element-ui的样式,在demo.vue中使用table组件,并且style上加scoped,在修改table组件里边的样式是不生效的,因为data-v-009只加在
子组件的第一层,子组件中其他dom是没有data-v-009这个属性的,而你写在scoped中的样式都会被postcss 添加[data-v-009],样式只作用于有data-v-009这个属性的dom
无论你权值多高,甚至添加!important,都无法修改子组件中样式的
慎用scoped
父组件无scoped属性,子组件带有scoped,父组件是无法操作子组件的样式的(原因在原理中可知),虽然我们可以在全局中通过该类标签的标签选择器设置样式,但会影响到其他组件
父组件有scoped属性,子组件无,父组件也无法设置子组件样式,因为父组件的所有标签都会带有data-v-469af010唯一标志,但子组件不会带有这个唯一标志属性,与1同理,虽然我们可以在全局中通过该类标签的标签选择器设置样式,但会影响到其他组件
父子组建都有,同理也无法设置样式,更改起来增加代码量
解决方法
1穿透scoped
注意 stylus的样式穿透 使用>>> sass和less的样式穿透 使用/deep/
<style scoped> 外层 >>> 第三方组件 { 样式 } /* 使用以下这段无法修改table样式 */ .el-table__header-wrapper { height: 20px; } /* 穿透之后可以顺利修改element-ui样式 */ .el-contain-row /deep/ .el-table__header-wrapper { height: 20px; } </style>
2使用两个style标签 使用less 不可用此方法
<style> /* 用于修改第三方库的样式 */ </style> <style scoped> /* 自己的组件内样式 */ </style>
添加class
通过在外层dom上添加唯一的class来区分不同组件。这种方法既实现了类似于scoped的效果,又方便修改各种第三方组件的样式,代码看起来也相对舒适。
<style> .my-class { color: red; /* 所有样式都被包含在my-class中 */ } </style> <template> <div class="my-class"> <!-- dom结构 --> </div> </template>
- 点赞
- 收藏
- 分享
- 文章举报
- 使用scoped穿透方法实现修改vue中mint UI组件样式
- Vue中scoped穿透 修改子组件样式
- Vue中的scoped实现原理及穿透方法
- vue实现移动端轻量日期组件不依赖第三方库的方法
- 在Vue.js中,在scoped模式下如何修改子组件内部标签的样式
- vue中element组件样式修改无效的解决方法
- Vue中父组件修改子组件样式方法(深度选择器)
- vue里面父组件修改子组件样式的方法
- 在Vue.js中,在scoped模式下如何修改子组件内部标签的样式
- vue 组件开发原理与实现方法详解
- vue脚手架样式设置不能显示 less样式穿透
- vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题
- 基于vue的纯净checkbox组件,不依赖其他第三方库,导入即可使用,可自行修改样式
- vue开发中,父组件添加scoped之后。解决在父组件中无法修改子组件样式问题。
- P2P之UDP穿透NAT的原理与实现 - 增强篇(附修改过的源代码)
- React 组件生命周期(注意state不能在cwu方法中修改)
- Vue中自定义全局组件的实现方法
- 【C#】对异步请求处理程序IHttpAsyncHandler的理解和分享一个易用性封装 【手记】走近科学之为什么明明实现了IEnumerable<T>的类型却不能调用LINQ扩展方法 【手记】手机网页弹出层后屏蔽底层的滑动响应 【手记】ASP.NET提示“未能创建类型”处理 【Web】一个非常简单的移动web消息框 【手记】解决EXCEL跑SQL遇“查询无法运行或数据库表无法打开...”
- vue组件中的样式属性scoped实例
- vue中element组件样式修改无效