好资源导航 » 文章资讯 » .vue文件加scoped 样式不起作用的解决方法

.vue文件加scoped 样式不起作用的解决方法

2023-09-12 05:52:05 67

浅谈关于.vue文件中的style的scoped属性

注意：scoped作用：使得.vue中的样式不影响其他.vue组件样式，而不是scoped使得.vue组件样式不受外样式影响。

1、在vue组件中，为了使样式私有化（模块化），不对全局造成污染，在style标签上添加scoped属性，以表示它只属于当下的模块。但是要慎用，因为在我们需要修改公共组件（第三方库或者项目中定制的组件）的样式的时候，scoped会造成很多困难，组要增加额外的复杂度。

一、创建公共组件button：

//button.vue

...

.button-warp{
display:inline-block;
}
.button{
padding:5px10px;
font-size:12px;
border-radus:2px;
}

浏览器渲染后的button组件为:


text

.button-warp[data-v-2311c06a]{ display:inline-block; } .button[data-v-2311c06a]{ padding:5px10px; font-size:12px; border-radus:2px; }

从上面的结果可以看出，添加了scoped属性的组件，做了如下操作：

（1）、给HTML的DOM节点增加一个不重复的data属性。（如：data-v-2311c06a）
（2）、在每句css选择器的末尾（编译后生成的css语句）加一个当前组件的data属性选择器(如：data-v-2311c06a)来私有化样式。

二、在"不使用"scoped的组件中引用button组件：

//content.vue

...

浏览器渲染出来的结果是：





text

/*button.vue渲染出来的css*/ .button-warp[data-v-2311c06a]{ display:inline-block; } .button[data-v-2311c06a]{ padding:5px10px; font-size:12px; border-radus:2px; } /*content.vue渲染出来的css*/ .content{ width:1200px; margin:0auto; } .content.button{ border-raduis:5px; }

虽然，在content组件中修改了button的border-radius属性，但是由于权重关系，生效的依然是组件内部的样式（即.button[data-v-2311c06a]定义的样式），如果此时仍需修改样式，则鼻血加重我们需要修改的样式的权重。

三、在"使用"scoped的组件中引用button组件：

//content.vue

...

.content{
width:1200px;
margin:0auto;
}
.content.button{
border-raduis:5px;
}

浏览器渲染的结果是：





text

/*button.vue渲染出来的css*/ .button-warp[data-v-2311c06a]{ display:inline-block; } .button[data-v-2311c06a]{ padding:5px10px; font-size:12px; border-radus:2px; } /*content.vue渲染出来的css*/ .content[data-v-57bc25a0]{ width:1200px; margin:0auto; } .content.button[data-v-57bc25a0]{ border-raduis:5px; }

虽然，我们在content添加了scoped属性，但是.content.button这句末尾添加的是content的scoped标记，最后我们实际上是找不到向对应的DOM节点的，也就不起作用啦。

解决办法：

在content.vue文件中添加两个style样式：

//content.vue

...

//针对content组件内部的样式
.content{
width:1200px;
margin:0auto;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

.vue文件 加scoped 样式不起作用的解决方法

热门推荐

随机推荐

.vue文件加scoped 样式不起作用的解决方法