首页 文章

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

提问于
浏览 次
13

VueJS上的docs声明 scoped 应该限制组件的样式 . 但是如果我创建具有相同 baz 样式的2个组件，它将从一个组件泄漏到另一个组件：

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>

如您所见，"leak"是由VueJS通过在 bar 组件中指定两个数据属性而有意生成的 . 但为什么？

vue.js vuejs2

1 回答

  • 15

    你可以阅读Vue loader's docs：

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

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

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

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

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

相关问题