《vue》关于样式中“scoped”边界问题

众所周知，Vue中样式的scoped，可以划分css模块，形成css作用域。

那么它的作用域边界是哪里呢？

先说结论：

写了 scoped 的style，其作用域是该组件，以及该组件中 子组件的 根节点。

// 父组件 father.vue
<template>
  <div class="father">
    <Son />
  </div>
</template>
<script>
import Son from '@/components/Son.vue'
export default {
  components: {
    Son
  }
}
</script>

<style lang="less" scoped>
.son_wrap {
  background-color: pink;
}
</style>

// 子组件 son.vue
<template>
  <div class="son_wrap">  <!-- 根节点 -->
    很多内容...
 </div>
</template>
<script>
export default {}
</script>

此时，Son.vue 背景颜色会变成 pink！
即使此时的Son.vue中也写了背景颜色

// Son.vue
<style lang="less" scoped>
.son_wrap {
  background-color: blue;
}
</style>

最终显示依然是 pink !!
这是因为Vue tree 的形成是：
父组件 beforeMount ---> 子组件 mounted ---> 父组件 mounted
父组件把子组件的 background-color 覆盖了

所以，一般组件的根节点的样式名称都是文件名+wrap或者文件名+container等，为的就是能快速知道组件的根节点的样式名称。

当然，你也可以直接在使用子组件的时候再加一个样式名字

// 父组件 father.vue
<template>
  <div class="father">
    <Son class="test_wrap"/>
  </div>
</template>
<script>
</script>

审查元素.png

父组件的常规操作只能控制子组件的根节点的样式，如果想控制子组件内部的样式，可以再写一个<style></style>不加scoped，或者使用样式穿透。