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

Question

Docs VueJS声明“范围”应该限制样式到组件。但是，如果我创建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> 

我想到的是“巴兹”将两个组件都不相同。但是在生成一个网页后，我可以看到蓝色背景上的yje红色文本，这意味着“foo”的作用域风格会影响“bar”组件。生成的代码看起来是这样的：

<div class="baz" data-v-ca22f368> 
    <div class="baz" data-v-a0c7f1ce data-v-ca22f368> 
    bar 
    </div> 
</div> 

正如你可以看到，被有意地通过经由VueJS指定两个数据属性插入“栏中的”组件生成的“泄漏”。但为什么？

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>