上一节内容我们学习了 Vue 中使用 CSS 系统学习 vue 中使用 css 的各种方式,这节内容学习一下 scoped 和 /deep/ 的作用:
在 vue 中使用组件时,最怕 css 之间纠缠不清,相互冲突。在单文件组件中,vue-loader 中提供了关键字 scoped 专门用来防止组件之间 css 产生干扰。其本质是利用了 css 的权重。在 聚齐了这3张宝图,搞懂CSS权重 这节内容中详细学习了 css 的权重。举例:
组件层级:
├── App
├── Home
└── Des
组件 App:
<template>
<Home class="root"/>
template>
<script>import Home from './components/Home.vue'export default {name: 'App',components: {
Home
}
}script>
<style scoped>.root {margin: 20px;
}/* 由于在子组件 Home 中也定义了 home-wrap 这个 class,将会被父组件定义的同名 class 覆盖,不过只能覆子组件的根组件样式 */.home-wrap {background-color: #22aa22;
}/* 虽然子组件 Home 也定义了该 class,但由于不是根节点的 class,将不会被覆盖*/.des {background-color: #ccc;
}style>
定义组件 Home:
<template>
<div class="home-wrap">
<h1 class="title">前端小课h1>
<div class="des">
<p class="text">帮助10W人入门并进阶前端p>
<Des>Des>
div>
div>
template>
<script>import Des from './Des.vue';export default {name: 'Home',components: {
Des
}
}script>
<style scoped>
.home-wrap {
background-color: #eee;
min-height: 200px;
padding: 10px;
}
/* 父组件只能覆盖根节点的 class,如果想覆盖非根节点的 class 需要添加 /deep/ */
/deep/ .content {
font-size: 20px;
}
style>
<style>.title {font-size: 20px;
}style>
定义组件 Des:
<template>
<div class="des-wrap">
<p class="content">掌握 Vue 的核心编程思想。p>
div>
template>
<script>export default {name: 'Des'
}script>
<style scoped>.des-wrap {background-color: #333;padding: 10px;border-radius: 6px;
}.content {font-size: 20px;color: #fff;
}style>
这背后的原理,其实利用了属性选择器,我们看上面代码下被转换后的 HTML:
<div class="home-wrap root" data-v-5b987f2c="" data-v-7ac74a55="">
<h1 class="title" data-v-5b987f2c="">前端小课h1>
<div class="des" data-v-5b987f2c="">
<p class="text" data-v-5b987f2c="">帮助10W人入门并进阶前端p>
<div class="des-wrap" data-v-711c43d5="" data-v-5b987f2c="">
<p class="content" data-v-711c43d5="">掌握 Vue 的核心编程思想。p>
div>
div>
div>
/* 自动添加属性 */
.home-wrap[data-v-7ac74a55] {
background-color: rgb(34, 170, 34);
}
.root[data-v-7ac74a55] {
margin: 20px;
}
/* 未使用 scroped */
.title {
font-size: 20px;
}
.des-wrap[data-v-711c43d5] {
background-color: rgb(51, 51, 51);
padding: 10px;
border-radius: 6px;
}
[data-v-5b987f2c] .content {
font-size: 30px;
}
.content[data-v-711c43d5] {
font-size: 20px;
color: rgb(255, 255, 255);
}
从转换结果中可以看到,vue-loader 会给 CSS 选择器添加了属性,使其变为了属性选择器,只有包含某个属性的元素才会被选中。这种方案其实给我们提供了一种解决 css 冲突的方案。
scoped 减少了我对 CSS 样式冲突的焦虑
大家加油!
长按关注
素燕《前端小课》帮助 10W 人入门并进阶前端
官网:https://lefex.gitee.io/