如何在VueJS单个文件组件中正确使用“作用域”样式？

老丝村村Stafan2020-03-12

VueJS上的文档指出scoped应将样式限制为组件。但是，如果我创建两个具有相同baz样式的组件，它将从一个组件泄漏到另一个组件中：

foo.vue

<template>
<div class="baz">
  <Bar></Bar>
</div>
</template>

<style scoped>
.baz {
  color: red;
}
</style>

bar.vue

<template>
<div class="baz">bar</div>
</template>

<style scoped>
.baz {
  background-color: blue;
}
</style>

我希望这baz两个方面都会有所不同。但是生成网页后，我可以在蓝色背景上看到红色文本，这意味着foo的作用域样式会影响该bar组件。生成的代码如下所示：

<div class="baz" data-v-ca22f368>
  <div class="baz" data-v-a0c7f1ce data-v-ca22f368>
    bar
  </div>
</div>

如您所见，“泄漏”是VueJS通过在bar组件中指定两个数据属性而有意生成的。但为什么？