vue---style scoped属性的作用和原理、scoped穿透

使用vue开发项目时,发现style标签中存在一个属性scoped。

scoped 属性是 HTML5 中的新属性,是一个布尔属性。如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素。

作用:实现组件的私有化,不对全局造成样式污染,表示当前style属性只属于当前模块。

原理:scoped会在DOM结构及css样式上加上唯一性的标记【data-v-something】属性,即CSS带属性选择器,以此完成类似作用域的选择方式,从而达到样式私有化,不污染全局的作用。

scoped使用虽然方便但是我们需要慎用,因为在我们需要修改公共组件(三方库或者项目定制的组件)的样式的时候,scoped往往会造成更多的困难,需要增加额外的复杂度。

以elementUI为例,在使用scoped会出现 CSS 设置不起效的问题,无法通过 CSS 修改组件的样式。可以使用下面的方法来解决

(1)使用 >>> 可以穿透 scoped 属性,修改其他第三方组件的样式。

外层 >>> 第三方组件{}

(2)使用 sass 或 less 的样式穿透 /deep/ 。

外层 /deep/ 第三方组件{}

(3)使用两个 style 标签,一个带 scoped 属性,一个不带 scoped 属性,用来修改第三方组件的样式。

在样式中,把【.name-input】换成【.el-input】,【.address-select】换成【.el-select】也可以。注意找到外层即可。

参考:Vue项目中scoped属性的作用,及scoped穿透

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章