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

前端之家收集整理的这篇文章主要介绍了浅谈关于.vue文件中style的scoped属性前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文介绍了.vue文件中style的scoped属性以及踩到的坑,具体如下:

scoped可以实现style只作用于当前的.vue文件

上面的文件渲染出的dom结构会是这样的

css样式是这样的

这样就现实了样式只作用于当前.vue文件

问题:添加scoped属性后样式不起作用

原因是,css被构建成.user[data-v-53795c54] 但是doc节点依然是普通的

,导致样式不能作用在dom上而失效。

原因在引用的组件上,解决方法是将scoped属性关闭

scoped关闭时的使用建议

如果需要将scoped关闭,那么style就是作用于整个单页应用

可是我们仍然想要样式之作用于当前的.vue文件,减少对其他文件样式的影响

1、给template下的根节点加一个class,并基于这个class添加样式

<style lang='less>
.user {
color:#333;
.name {
color:#122222;
}
}

2、基于第一条建议,不要有定义两个相同class名称的根节点,因为都作用于整个单页会有一个失效。

3、不要使用 span {}这种做样式设置。因为