The docs https://vue-loader.vuejs.org/en/features/scoped-css.html在 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成分。但为什么？
您可以阅读Vue 加载器的文档 https://vue-loader.vuejs.org/en/features/scoped-css.html#notes:
子组件的根节点将同时受到父组件作用域 CSS 和子组件作用域 CSS 的影响。
这显然是它的目的，尽管它可能看起来有点令人困惑。
如果你想避免这种情况，你应该使用CSS 模块 https://vue-loader.vuejs.org/en/features/css-modules.html:
<template>
<div :class="$style.baz">
<Bar></Bar>
</div>
</template>
<style module>
.baz {
color: red;
}
</style>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
