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

vue.js Vue.js

老丝村村Stafan

2020-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组件中指定两个数据属性而有意生成的。但为什么？

第1189篇《如何在VueJS单个文件组件中正确使用“作用域”样式？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
小哥达蒙卡卡西 2020.03.12

您可以阅读Vue加载程序的文档：

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

尽管这似乎有些令人困惑，但显然这是要执行的操作。

如果要避免这种情况，应该使用css模块：

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android