浅谈关于.vue文件中的style的scoped属性
注意:scoped作用:使得.vue中的样式不影响其他.vue组件样式,而不是scoped使得.vue组件样式不受外样式影响。
1、在vue组件中,为了使样式私有化(模块化),不对全局造成污染,在style标签上添加scoped属性,以表示它只属于当下的模块。但是要慎用,因为在我们需要修改公共组件(第三方库或者项目中定制的组件)的样式的时候,scoped会造成很多困难,组要增加额外的复杂度。
一、创建公共组件button:
//button.vue
<template>
<div class="button-warp">
<button class="button">text</button>
</div>
</template>
...
<style scoped>
.button-warp{
display:inline-block;
}
.button{
padding: 5px 10px;
font-size: 12px;
border-radus: 2px;
}
</style>
浏览器渲染后的button组件为:
<div data-v-2311c06a class="button-warp">
<button data-v-2311c06a class="button">text</button>
</div>
.button-warp[data-v-2311c06a]{
display:inline-block;
}
.button[data-v-2311c06a]{
padding: 5px 10px;
font-size: 12px;
border-radus: 2px;
}
从上面的结果可以看出,添加了scoped属性的组件,做了如下操作:
(1)、给HTML的DOM节点增加一个不重复的data属性。(如:data-v-2311c06a)
(2)、在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(如:data-v-2311c06a)来私有化样式。若多层 也只给最后一个设置例
.a .b .c{//多层
color:red
}
//会渲染成
.a .b .c[data-v-2311c06a]{
color:red
}
在这里插入代码片
二、在 " 不使用 " scoped的组件中引用button组件:
//content.vue
<template>
<div class="content">
<p class="title"></p>
<!-- v-button假设是上面定义的公共组件 -->
<v-button></v-button>
</div>
</template>
...
<style>
.content{
width: 1200px;
margin: 0 auto;
}
.content .button{
border-raduis: 5px;
}
</style>
浏览器渲染出来的结果是:
<div class="content">
<p class="title"></p>
<!-- v-button假设是上面定义的组件 -->
<div data-v-2311c06a class="button-warp">
<button data-v-2311c06a class="button">text</button>
</div>
</div>
/*button.vue渲染出来的css*/
.button-warp[data-v-2311c06a]{
display:inline-block;
}
.button[data-v-2311c06a]{
padding: 5px 10px;
font-size: 12px;
border-radus: 2px;
}
/*content.vue渲染出来的css*/
.content{
width: 1200px;
margin: 0 auto;
}
.content .button{
border-raduis: 5px;
}
虽然,在content组件中修改了button的border-radius属性,但是由于权重关系,生效的依然是组件内部的样式(即.button[data-v-2311c06a]定义的样式), 如果此时仍需修改样式,则必须加重我们需要修改的样式的权重。
三、在 " 使用 " scoped的组件中引用button组件:
//content.vue
<template>
<div class="content">
<p class="title"></p>
<!-- v-button假设是上面定义的公共组件 -->
<v-button></v-button>
</div>
</template>
...
<style scoped>
.content{
width: 1200px;
margin: 0 auto;
}
.content .button{
border-raduis: 5px;
}
</style>
浏览器渲染的结果是:
<div data-v-57bc25a0 class="content">
<p data-v-57bc25a0 class="title"></p>
<!-- v-button假设是上面定义的组件 -->
<div data-v-57bc25a0 data-v-2311c06a class="button-warp">
<button data-v-2311c06a class="button">text</button>
</div>
</div>
/*button.vue渲染出来的css*/
.button-warp[data-v-2311c06a]{
display:inline-block;
}
.button[data-v-2311c06a]{
padding: 5px 10px;
font-size: 12px;
border-radus: 2px;
}
/*content.vue渲染出来的css*/
.content[data-v-57bc25a0]{
width: 1200px;
margin: 0 auto;
}
.content .button[data-v-57bc25a0]{
border-raduis: 5px;
}
虽然,我们在content添加了scoped属性,但是.content .button 这句末尾添加的是content的scoped标记,最后我们实际上是找不到向对应的DOM节点的,也就不起作用啦。
解决办法:
方法一:
每一个组件名字不同,模板的根元素div类名具有唯一性,在此类里面写的样式不会污染全局,所以可以定一个唯一性的类名,然后不加scoped.
方法二:
在content.vue文件中添加两个style样式:
//content.vue
<template>
<div class="content">
<p class="title"></p>
<!-- v-button假设是上面定义的组件 -->
<v-button></v-button>
</div>
</template>
...
<style scoped>
//针对content组件内部的样式
.content{
width: 1200px;
margin: 0 auto;
}
</style>
<style>
//针对公共组件的样式
.content .button{
border-raduis: 5px !important;
}
</style>
方法三: 用/deep/深度作用选择器 推荐此写法 vue必学 )
/deep/深度作用选择器作用及使用看博文https://blog.csdn.net/weixin_45842655/article/details/103547362或者点我跳转
本文部分内容是转载,原文链接:https://segmentfault.com/a/1190000015056777.如有侵权请联系我立即删除,谢谢!