vue中scoped的作用原理以及样式穿透方法

scoped的作用原理

作用:在Vue项目中,在style中加入scoped之后它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。实现组件的私有样式模块化,通过该属性,可以避免全局和组件之间的样式污染。

<style lang="less" scoped>
.example {
  color: red;
}
</style>

原理:可以通过结构发现vue在组件DOM结构上添加了一个动态属性,给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom,这种做法使得样式只作用于含有该属性的dom。

样式穿透

在Vue项目中,当我们引入第三方组件库时(如使用element-ui),需要在局部组件中修改第三方组件库样式,而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。

方法一 ::deep 注意是2个冒号 (强烈推荐)

# 在选择器前面加上::v-deep 即可
::v-deep .van-nav-bar__left

方法二 使用 >>> 不推荐 (若是scss无法使用)

>>> .van-nav-bar__left

方法三 使用 /deep/ 不推荐 (vue3.x打包会报错)

/deep/ .van-nav-bar__left
© 版权声明
THE END
喜欢就支持以下吧
点赞0
分享
评论 抢沙发