Vue中style的scoped属性以及穿透方法

WEB前端 Vue.js 2018年8月9日

在Vue组件中，为了使样式私有化（模块化），不对全局造成污染，可以在style标签上添加scoped属性以表示它的只属于当下的模块，局部有效。如果一个项目中的所有vue组件style标签全部加上了scoped，相当于实现了样式的私有化。如果引用了第三方组件，需要在当前组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过穿透scoped的方式来解决，选择器>>>。下面雷雪松详细的介绍一下vue中style的scoped属性以及穿透方法。

1、scoped的实现原理
Vue中的scoped属性的效果主要通过PostCSS转译实现，如下是转译前的Vue代码：
[cc lang=”html” escaped=”true”]<template>
<div class=”scoped”>Vue.js scoped</div>
</template>

<style scoped>
.scoped {
font-size:14px;
}
</style>[/cc]

浏览器渲染后的代码：
[cc lang=”html” escaped=”true”]<div data-v-fed36922 class=”scoped”>Vue.js scoped</div>
.scoped[data-v-fed36922]{
font-size:14px;
}[/cc]

即：PostCSS给所有dom添加了一个唯一不重复的动态属性，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式私有化。

2、Vue中style属性为scoped如何穿透？
[cc lang=”html” escaped=”true”]<style scoped>
选择器 >>> 第三方组件选择器 {

}
</style>[/cc]

雷雪松个人感觉，在Vue中style属性为scoped使用穿透解决实际问题其实是怕不得已之举，和scoped初衷是相违背的。尽量避免这样的问题出现。WEB前端开发变化最快，经常会有新的框架，新的开发思想。从以前的JQuery到现在的Vue，从以前只是实现页面简单交互到现在各种丰富的开发库，NodeJS的出现使js不仅能做前端效果，也可以用在可以用来开发后台大型的项目。对于我们程序员开发来说，只有保持一颗不断学习的心态，才能不被前端开发这个行业淘汰。

来源：Vue中style的scoped属性以及穿透方法