vue scoped和scoped穿透

vue文件中的style标签上会有一个特殊属性scoped。当一个style标签拥有scoped属性时，他的css样式只能作用于当前的vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加了scoped属性，相当于完成了样式的模块化。

一、scoped的实现原理

scoped渲染规则：

1、给html的dom节点添加一个不重复的data属性（如：data-v-5558831a）来唯一标识这个dom元素

2、给每句css选择器的末尾加一个当前组件的data属性选择器（如：[data-v-5558831a]）来私有化样式

转译前

<template><div class="example">scoped</div>
</template>
<style scoped>.example{color:red;}
</style>

转译后

<template><div class="example" data-v-5558831a>scoped</div>
</template>.example[data-v-5558831a] {color: red;
}

二、scoped穿透

在vue项目中，当我们引入第三方插件时，需要在局部组件中修改第三方插件的样式，又不想去掉scoped属性；

1、stylus的样式穿透使用 >>>

外层 >>> 第三方组件{样式
}.wrapper >>> .el-checkbox{background:#fff
}

2、sass和less样式穿透使用/deep/

外层 /deep/ 第三方组件{样式
}
/deep/ .el-checkbox{background:#fff;
}

3、vue-cli3编译时，有时deep的方式会报错或者警告，这时候用第三种

::v-deep .b {background:#fff;
}

vue scoped和scoped穿透相关推荐

Vue中的scoped和scoped穿透
1.什么是scoped 在Vue文件中的style标签上有一个特殊的属性,scoped.当一个style标签拥有scoped属性时候,它的css样式只能用于当前的Vue组件,可以使组件的样式不相互污染 ...
Vue中的scoped的实现原理以及scoped穿透的用法
本篇文章给大家带来的内容是关于Vue中的scoped的实现原理以及scoped穿透的用法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.什么是scoped 在Vue文件 ...
带你玩转 ui 框架 ——scoped及样式穿透问题详解
前言在我们前端的开发中经常会使用到各种 ui 框架下面这两个是比较火的,也是我常用的两个ui框架. 问题描述但是在使用框架的时候难免会遇到需要改变组件中的一些样式,当然如果我们所有页面的组件样式 ...
vue - 深入理解vue中的scoped属性
文章目录 1,前言 2,scoped原理 3,父子组件使用scoped的不同情况 4,第一种:父组件未添加scoped,子组件未添加scoped 5,第二种:父组件未添加scoped,子组件添加sco ...
vue 中的scoped原理
scoped作用在vue文件中的style标签上加上scoped属性,则style标签下的样式只能在本组件中使用. 如果每一个vue组件的style标签都加上了scoped,那就实现了样式的模块化. ...
vue 中的 scoped
前言我们平常在开发过程中特别是Vue技术栈的前端同学们,经常会用到一些UI组件库,特别是element-ui使用的频率是比较高的,我们经常会修改这些UI组件库的默认样式时会使用到深度选择器,大家都知 ...
vue v-html scoped,基于vue中的scoped坑点解说
今天在覆盖iview组件样式的时候发现一个问题,就是无法覆盖组件原有的样式,最后在github的issue中找到了答案: 不要使用scoped属性.于是我查找了下关于scoped的文章. 我们假设把这 ...
Vue 组件 style scoped
预防各个组件中的css样式出现相同的名称而导致混乱. 例如 <style>.demo{background-color: #ffaa00;.h {font-size: 20px;colo ...
Vue 中 CSS scoped 的原理
前言在日常的Vue项目开发过程中,为了让项目更好的维护一般都会使用模块化开发的方式进行.也就是每个组件维护独立的template,script,style.主要介绍一下使用<style sco ...
浅谈Vue的style scoped
style scoped的作用在使用Vue-Cli 开发时,我们都知道,在组件的<style></style>加上 scoped属性,可以让<style>< ...

vue scoped和scoped穿透

一、scoped的实现原理

二、scoped穿透

vue scoped和scoped穿透相关推荐

最新文章

热门文章