html - VueJS单文件组件如何正确使用 "scoped"样式？

Question

docs在 VueJS 上声明 scoped 应该限制组件的样式。但是，如果我创建 2 个具有相同 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的scoped样式影响了bar组件。生成的代码如下所示:

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

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

Answer 1

您可以在 Vue loader's docs 上阅读:

A child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS.

这显然是它的目的，尽管它可能看起来有点困惑。

如果你想避免这种情况，你应该使用 css modules :

<template>
<div :class="$style.baz">
  <Bar></Bar>
</div>
</template>

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