Vue中的作用域CSS和CSS模块的区别(2)

日期：2020-05-11 栏目：程序人生浏览：次

转换后就像下面这样：

这次还是一样，不需要做什么就可以很好的控制样式。

不过请注意：这个特性存在一个缺陷，即如果你子组件的元素上有一个类已经在这个父组件中定义过了，那么这个父组件的样式就也会应用到子组件上。只不过其权重没有子组件同类名的重。比如下面这个示例：

<!-- Button.vue -->
<template>
 <button class="btn btn-lg">
 <slot></slot>
 </button>
</template>
<style scoped>
.btn {
 color: red;
}
.btn-lg {
 padding: 10px 20px;
 border: 2px solid red;
}
</style>
<!-- App.vue -->
<template>
 <div id="app">
 <Button class="btn-lg">click</Button>
 </div>
</template>
<script>
 import Button from "./components/Button";
 export default {
 name: "App",
 components: {
  Button
 }
 };
</script>
<style scoped>
.btn-lg {
 padding: 30px;
 border: 5px solid green;
}
</style>

编译出来的效果如下：

还有一些情况是我们需要对子组件的深层次结构设置样式。虽然这种做法并不受推荐，而且应该尽量去避免。比如下面这个示例， Button 组件下有一个 <span> 标签，而在调用 Button 组件的父组件 App 中设置 span 样式：

<!-- Button.vue -->
<template>
 <button class="btn">
 <span>
  <slot></slot>
 </span>
 </button>
</template>
<style scoped>
.btn {
 color: red;
}
</style>
<!-- App.vue -->
<template>
 <div id="app">
 <Button class="btn-lg">click</Button>
 </div>
</template>
<script>
 import Button from "./components/Button";
 export default {
 name: "App",
 components: {
  Button
 }
 };
</script>
<style scoped>
.btn span {
 color: green;
 font-weight: bold;
 border: 1px solid green;
 padding: 10px;
}
</style>

编译出来的结果如下：

Vue中的作用域CSS和CSS模块的区别(2)

相关推荐