前言
当 <style>
标签有 scoped
属性时,它的 CSS 只作用于当前组件中的元素,不会影响到子组件(非根结点)的样式。
使用
scoped
后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。
原理
在编译组件的时候,如果当前组件内style标签上有scoped属性,那么会在当前所有标签上添加一个【data-v-hash】属性,而当前样式表内的所有末尾选择器后面也会加上该属性,那么就使得当前组件内的样式只会作用于当前组件内的元素。
例子
值得注意的是,当父组件,子组件同时使用scoped属性时,子组件最外层的标签既会被加上当前组件的hash值,又会加上父级组件的hash值
若父组件样式添加scoped,父组件的所有标签则添加hash:
<div data-v-b45036b2></div>
各自带有自己组件的hash,子组件除了有自己的hash之外,还带上了父组件的hash,子组件最外层标签:
<div data-v-b45036b2 data-v-384b136e ></div></