Vue样式scoped存在的问题
为了解决css存在的一大痛点：天生全局性，每个通过 vue-cli 创建的 Vue.js 应用都内置了两个很好的解决方案：Scoped CSS 和 CSS Modules (模块式 CSS)。现在我们只介绍Scoped CSS.
我们只需在<style>标签上添加scoped属性就可以让样式只应用到该组件的元素上。
<template>
<button class=”button” />
</template>
<style scoped>
.button {
color: red;
}
</style>
这是通过postCSS实现的，将转换为以下代码：
<style>
.button[data-v-f61kqi1] {
color: red;
}
</style>
<button class=”button” data-v-f61kqi1></button>
但是，这个特性存在一个缺陷！！!
如果你子组件的根元素上有一个类已经在这个父组件中定义过了，那么这个父组件的样式就会泄露到子组件中
我们在父元素中定义wrapper类边框为蓝色，在子组件中定义同一个名字的类wrapper类边框为橙色，结果会导致子组件中既有父元素的蓝色边框又有自己的橙色边框：
因此，我们要避免在父组件中书写和子组件同名的css类。