在vue中style标签中设置scoped属性，存在穿透问题

在vue中，我们在style标签中设置scoped属性的目的是将style中的样式仅仅作用在当前文件中，但是存在一种情况。

//父组件
<template>
  <h1>我是APP中的h1</h1>
  <HelloWorld></HelloWorld>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  components: {
    HelloWorld,
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
h1 {
  color: red;
}
</style>

//子组件
<template>
  <h1>我是HelloWorld</h1>
</template>

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

    }
  }
}
</script>

<style scoped>

</style>

最终表现的结果为：

明明我们在父组件中将h1的颜色设置为red，但是在其子组件的h1也设置为red。接下来我们将探究原因。
原因:
在浏览器中我们打开控制台，查看源代码，我们会发现h1上存在一个属性data-v-7ba5bd90,并且在样式中通过该属性来设置属性值。


因为当我们在父组件中通过标签设置样式时，会给每一个子组件最外层添加该标签设置的属性。
解决方法:

1、将标签样式设置为class样式
2、在子组件外层包裹一层div标签。
这两个元素都可以解决该问题