【面试】面试官:说说scoped的原理

每一个vue组件是相互独立的。

在每一个组件里,都可以进行布局,如果不在style里加入scoped,它就会影响到所有的组件。

如果想写样式,只在本组件内生效,就要加scoped。

作用:让样式在本组件内生效,不影响其他组件。

原理:给节点新增自定义属性,然后css根据属性选择器添加样式。


1.当父组件无scoped属性,子组件带有scoped,子组件所有标签会套上子组件的data-v-hash属性,

2.当父组件有scoped属性,子组件无scoped.父组件所有标签和子组件的最外层标签有父组件的data-v-hash属性.

3.父子组件都有scoped,父组件的所有标签有父组件的data-v-hash属性,子组件的所有标签有子组件的data-v-hash属性,这时子组件的最外层标签就会同时套上父组件和子组件的data-v-hash属性
 

猜你喜欢

转载自blog.csdn.net/qq_46580087/article/details/124689982