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

Question

VueJS 上的 docs 声明 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 的作用域样式影响了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：

子组件的根节点会同时受到父级作用域 CSS 和子级作用域 CSS 的影响。

这显然是它的本意，尽管它可能看起来有点混乱。

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

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

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

Answer 2

2021

我找到了答案，来自父组件的样式应用于子组件，但仅适用于第一个直接子组件，例如当我们有按钮组件时

<template>
   <button class='btn' />
</template>

有了这个，你可以将你的 btn 类的样式从父类改为aviod，你需要用一些虚拟 div 或最好使用的 vue-fragment 库来包装你的 btn 组件，你将避免 scoped 属性的样式泄漏问题。

<template>
   <fragment>
      <button class='btn' />
   </fragment>
</template>

这样你就不能在你的子组件中设置 btn 类的样式了。

此处的完整示例： https://codesandbox.io/s/falling-fog-2mu5z?file=/src/components/HelloWorld.vue

Vue 片段： https://www.npmjs.com/package/vue-fragment