版权声明:本文为博主原创学习笔记,如需转载请注明来源。 https://blog.csdn.net/SHU15121856/article/details/85262749
样式表最终的生成位置
有两个组件,一个是根组件App,一个是子组件Users。它们都有一个h2标签,先只在根组件上写CSS样式。
App.vue
<template>
<div id="app">
<h2>父组件的h2标签</h2>
</div>
</template>
<script>
import Users from './components/Users'
export default {
name: 'App',
components: {
"users": Users
}
}
</script>
<style>
h2 {
color:purple;
}
</style>
Users.vue
<template>
<div class="users">
<h2>子组件的h2标签</h2>
</div>
</template>
<script>
export default {
name: "Users"
}
</script>
<style>
</style>
运行结果
分析
可以看到生成的HTML中有两个style标签样式表,其中第一个样式表中的就是父组件的样式。第二个样式表是子组件的样式,现在是空的。
如果为子组件添加样式:
<style>
h2 {
color: green;
}
</style>
那么这两个h2标签就都是绿色的了,因为子组件的样式表在靠后的位置,对于冲入的样式会覆盖掉父组件的样式。
使用scoped限制样式作用域
当为两个组件都设置scoped后,即:
<style scoped>
//...
</style>
它们就都互不干扰了,这个scoped也就是限制里面的样式只围绕自己当前这个组件。所以结果就是:
可以看到Vue为两个组件的内容打上了不同的属性,而在样式表中使用属性选择器来选择限制选择的标签:
另外注意到嵌套的子组件的容器本身也具有了父组件的属性标识,但里面的标签就不再具有了。也就是说当使用了scoped,子组件中除了根容器本身之外的其它标签都不会继承父组件的样式。