vue组件中的style scoped中遇到的问题

Posted 明白问题才会知道答案的意义

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue组件中的style scoped中遇到的问题相关的知识,希望对你有一定的参考价值。

在uve组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点。添加scoped之后,实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯一属性的标识,当然也会给当前style的所有样式添加[data-v-1233]这样的话,就可以使得当前样式只作用于当前组件的节点。但是我们需要注意的是如果我们添加了子组件,同样的,如果子组件也用scoped标识了,那么在父组件中是不能设置子组件中的节点的。若父组件有scoped,子组件没有设置,同样,也是不能在父组件中设置子组件的节点的样式的,因为父组件用了scoped,那么父组件中style设置的样式都是唯一的了,不会作用与其他的组件样式。

 

以上是关于vue组件中的style scoped中遇到的问题的主要内容,如果未能解决你的问题,请参考以下文章

Vue中的scoped属性

vue里面父组件修改子组件样式的方法

vue样式穿透

[干货]关于vue3 SFC 范围内 scoped-styles 样式穿透

解析Vue中style标签scoped属性与deep选择器原理

vue 样式加scoped不起作用