原文链接https://blog.csdn.net/qq_41800366/article/details/107062781
为了便于展示和理解，在这里选择了一父组件和一子组件
父组件： 首先，父组件引入子组件TestScoped
<template>
<div class="parent">
<p>Here is parent component</p>
<TestScoped />
</div>
</template>
<style>
.parent {
color: deepskyblue;
}
</style>
子组件： TestScoped
<template>
<div class="son">
<p>Here is son component</p>
</div>
</template>
不添加 scoped
此时的HTML编译后的结果是:
<div class="parent">
<p>Here is parent component</p>
<div class="son">
<p>Here is son component</p>
</div>
</div>
没错，是我们所理解的样子，这时候因为在父组件中添加了如是的样式，那么肯定子组件的Here is son component也带有这个样式，结果的确是这样。
<style>
p {
color: deepskyblue;
}
</style>
渲染后的结果。
添加 scoped
也就是在父组件的style中添加scoped
<style scoped>
.p {
color: deepskyblue;
}
</style>
此时的HTML编译后的结果是:
<div data-v-7ba5bd90 class="parent">
<p data-v-7ba5bd90>Here is parent component</p>
<div data-v-7ba5bd90 class="son">
<p>Here is son component</p>
</div>
</div>
此时的编译结果也能够理解，也就是 vue 给父组件的每一个标签自动添加一个唯一的 attribute, 这里 注意,你会发现vue给子组件的根标签也打上了这一个唯一的attribute， 但是子组件的其他标签却没有打上。
编译后会发现，添加的css样式变成了如下：添加了唯一的标签，这也就是vue scoped 实现样式隔离的原理
p[data-v-7ba5bd90] {
color: deepskyblue;
}
由于子组件中除根标签以为其他都未打上父组件的唯一标签，那么可想而知，样式不会在子组件中生效，结果的确如此。
总结： 为什么vue组件中添加scoped后某些样式不生效？
原因： vue的scoped为本组件的所有标签都打上了一个唯一attribute，样式生效时也带上了这唯一的attribute，但是本组件应用的所有子组件，除根标签以为其他都未打上这唯一标签，因此样式自然不会生效。
