在vue组件中stylescoped中遇到的坑

 

　　在uve组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点。添加scoped之后&＃xff0c;实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯一属性的标识&＃xff0c;当然也会给当前style的所有样式添加[data-v-1233]这样的话&＃xff0c;就可以使得当前样式只作用于当前组件的节点。但是我们需要注意的是如果我们添加了子组件&＃xff0c;同样的&＃xff0c;如果子组件也用scoped标识了&＃xff0c;那么在父组件中是不能设置子组件中的节点的。若父组件有scoped&＃xff0c;子组件没有设置&＃xff0c;同样&＃xff0c;也是不能在父组件中设置子组件的节点的样式的&＃xff0c;因为父组件用了scoped,那么父组件中style设置的样式都是唯一的了&＃xff0c;不会作用与其他的组件样式&＃xff0c;我在用vue-quill-editor富文本编辑器的时候就遇到了这个坑&＃xff0c;我只是想让内容区设置一个高度&＃xff0c;这样的话&＃xff0c;是必须在App.vue中设置的&＃xff0c;我们App.vue相当于根容器&＃xff0c;没有设置scoped&＃xff0c;所以是可以设置的。