如何在VueJS单文件组件中正确使用"范围"样式？

Question

文档上VueJS指出,"作用域"应该限制样式组件.但是,如果我创建具有相同"baz"样式的2个组件,它将从一个组件泄漏到另一个组件:

scoped

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

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

baz

<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"组件中指定两个数据属性来有意生成"泄漏".但为什么？

Answer 1

您可以阅读Vue loader的文档:

子组件的根节点将受父级作用域CSS和子级作用域CSS的影响.

这显然是它的意图,即使它看起来有点令人困惑.

如果你想避免这种情况,你应该使用css模块:

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

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