vue的scoped 样式隔离，样式穿透，及细节

先说环境吧：vue 3.2.45，也试过vue 3.2.16

vue的scoped样式隔离

原理：

在当前组件的.vue文件中，如果style标签加了scoped属性，那么在组件渲染为DOM时，会对每个组件中的DOM元素添加格式为：data-v-[hash:8]的属性，然后该组件的所有`选择器`也会添加上对应的`[data-v-[hash:8]]`属性选择器来只对自身组件产生影响。以此来实现样式隔离。例子如下：

父组件：App.vue

<script>
import Comp from './Comp.vue';
export default {
  components:{
    Comp
  },
  data() {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

<template>
  <p>{{ msg }}
  	
  </p>
  <Comp/>
</template>

<style scoped>
  p{
    color:red;
  }

</style>

子组件：Comp.vue

<script>
export default {
  data() {
    return {
      
    }
  }
}
</script>

<template>
  <div>
    <p>
    	In Comp
  	</p>
  </div>
  <p>
    	In Comp
  </p>
  
</template>
<style scoped>
  p{
    font-size:20px;
    color:blue;
  }
</style>

DOM结果

效果图

 可以看到

1. 子组件Comp多了data-v-37b1dc3d属性，父组件App多了data-v-472cff63，并且style也设置了属性选择器
2. 由于属性选择器的缘故，实现了样式隔离。

小细节：

1. 如果父组件App.vue不设置scoped会怎么样

假设App.vue的style和Comp.vue的style如下

<!--App.vue  -->

<style>
  p{
    color:red;
  }
</style>

<!-- Comp.vue -->
<style scoped>
  p{
    font-size:20px;
  }
</style>

父组件的样式就成了全局的样式了。

2. 如果父组件App.vue和子组件Comp.vue都不设置scoped会怎么样

 

看结果就知道，俩组件的样式都成了全局的了

3. 注意样式继承

在1的基础上，首先父组件和子组件的样式都设置上scoped属性。然后父组件App.vue的template如下

<template>
  <p>{{ msg }}
  	<Comp/>
  </p>
  <Comp/>
</template>

 结果就是

 即使是样式隔离也要注意 样式继承

样式穿透的细节

1. 子组件的单节点和多节点

代码如下

<!--App.vue -->
<script>
import Comp from './Comp.vue';
export default {
  components:{
    Comp
  },
  data() {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

<template>
  <p>{{ msg }}
  	
  </p>
  <Comp/>
</template>
<style scoped>
  p{
    color:red;
  }
</style>

<!--Comp.vue -->
<script>
export default {
 
  data() {
    return {
     
    }
  }
}
</script>

<template>
  
  <p>
    In Comp
  </p>
  <p>
    In Comp
  </p>
  
</template>
<style scoped>
  p{
    font-size:20px;
  }
</style>

 这里Comp.vue的template包含了俩p标签，结果如下

能看出来，正常的实现样式隔离，不同组件各加各的data-v-[hash]属性

但是！

如果子组件只有一个p标签，其他条件不变时：

<template>
  
  <p>
    In Comp
  </p>
  
</template>

结果却是：

         

                                       

 这就很有意思了。   

如果说把Comp.vue的template设置如下：                                   

<template>
  <div>
      <p>
        In Comp
      </p>
  </div>
 
</template>

 结果则是

             

                                           

更进一步的，如果说把Comp.vue的template设置如下

<template>
  <div>
      <p>
        In Comp
      </p>
  </div>
  <div>
      <p>
        In Comp
      </p>
  </div>
</template>

 

总结

这么多次对比试验能看出来，当子节点为单节点时，由于template标签并不会出现在DOM树中，所以那个单节点就会同时具有父组件和子组件的data-v-[hash]属性。如果是多节点，则只会有组件自身的data-v-[hash]属性。有必要去看看vue源码了。

要说这个细节有啥用嘛。。。emmmmmm。。。就当注意一下比较好。假如父组件想自己的p标签字体是红色，子组件为默认颜色。那如果子组件不套一个div或者是一个单独的p标签，就会被父组件的样式所影响。以此类推到别的标签也是同理

2. 样式穿透

不想截图了。。。

样式穿透所使用的/deep/也好，>>> 也好。最后会被渲染为父组件的data-v-[hash]。也就是说，假设父组件的style为：>>> p{color:blue}，想用来改变子组件的p标签字体颜色来实现样式穿透。那么必须要保证子组件的template只有一个子节点，即上述的单个根节点情况。因为，单根节点（假设为div）会同时具有父组件和子组件的data-v-[hash]。

又因为/deep/也好，>>> 也好。最后会被vue更改为父组件的data-v-[hash]（假设为data-v-123456）。此时就能通过[data-v-123456] p{color:blue;}改变子组件p标签的字体颜色。而由于父组件其他的DOM，如某一个p标签，其选择器为p[data-v-123456]{......}，故而不会受到影响。