vue组件style中scoped的作用及说明

style中scoped的作用

scoped的作用：

使当前组件的样式不会和其它组件冲突，因为它会给每个组件相关的选择器添加不会重复的属性

//没有添加scoped
h1 {

}

//添加scoped
h1[data-e543434] {
    
}

注意事项：

• ​ 1、使用 scoped 后，父组件的样式将不会渗透到子组件中。
• ​ 2、不过一个子组件的*** 根节点 **会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。
• ​ 3、这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式

<style scoped>

</style>           

如果希望父组件的样式渗透到子组件，可以使用*** 样式穿透 **

scss的样式穿透的写法： 加上::v-deep（如果不兼容，就加/deep/ ）

//方案一
.wrapper ::v-deep .swiper-pagination-bullet {
opacity 1
background-color #fff
}
//方案二
.swiper-container /deep/ .swiper-pagination-bullet {
background-color: #f00;
opacity: 1;
}

vue中style加上scoped属性后部分样式失效

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素；使用 scoped 后，父组件的样式将不会渗透到子组件中。

不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。

1.混用本地和全局样式

<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>

2.深度作用选择器（样式穿透）

•  vue2： >>> 或者 /deep/
•  vue3： &:deep(calssName)

具体可看vue官方文档的vue-loader

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。