vue中
在vue文件中的style标签上有一个特殊的属性:scoped(布尔值);
<style scoped>
</style>
作用
该属性的作用是将当前标签下的样式私有化,仅对当前组件起作用
- 只管当前组件和子组件的最外层(不控制自组件)
原理
若是给style标签添加了scoped属性,在编译时
- 给当前组件和子组件的最外层的dom节点添加一个不重复的data自定义属性(例如: data-v-5558831a)来 唯一 标识这个dom 元素;
- 在每个css选择器中添加一个当前组件的data属性选择器(例如:[data-v-5558831a])来私有化样式
- 使得组件中的样式互不干扰;
缺点
虽然这样做保证样式只对当前组件起作用,不造成全局污染,但是于此同时
在我们使用第三方插件(eg:vant)的时候,想要修改其中的样式时—>若是我们写在带有scoped的style中时,默认会在选择器上加一个属性,这样就修改不到子元素的身上(无法修改子组件的样式);
解决
[1]解决1—使用穿透 ::v-deep
-
/deep/
----存在兼容性(vue3打包的时候会报错) -
>>>
—存在兼容性问题(scss使用会报错) -
::v-deep
—兼容性最好;
原理 :去掉了该标签的属性选择器;
[2]解决2—在同一组件写两个style标签
- 一个加scoped只管当前页面;
- 一个不加scoped处理修改子组件样式的问题;
举例
//在登录组件中使用vant的导航栏(自带padding,我们不需要,想要去掉)
<template>
<div class="login">
<!-- 导航栏 -->
<van-nav-bar>
<template #left>
<span class="iconfont icon44"></span>
</template>
</van-nav-bar>
</div>
</template>
//使用穿透(本来不能修改子组件的样式,只要在选择器加上 ::v-deep 就可以修改了)
<style lang='less' scoped>
::v-deep .van-nav-bar__left,
::v-deep .van-nav-bar__right {
padding: 0;
}
}
uni-app
在使用uni-app时我们使用的是.vue文件进行代码编写的,style标签也存在coped属性
原理
在uni-app中添加scoped属性之后,在编译时
- 给当前组件和子组件的最外层的dom节点添加一个不重复的data自定义类名来 唯一 标识这个dom 元素;
- 在每个css选择器中添加一个当前组件的data类名来私有化样式,使得组件中的样式互不干扰;
添加时机
在uni-app中我们需要给每一个组件添加scoped属性吗?
答案是不需要的,因为在vue中在打包时会将所有的样式打包到一个css文件中;而在uni-app中会将每个页面打包到一个单独的wxss文件中,因此这样已经保证了该文件的样式不被其他文件干扰了;文章来源:https://www.toymoban.com/news/detail-837311.html
若是我们抽离组件,要是不想当前组件中的样式被影响可以添加scoped属性。文章来源地址https://www.toymoban.com/news/detail-837311.html
到了这里,关于style标签上的scoped属性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!