第十八章 Vue组件样式范围配置之scoped
目录
一、引言
二、案例演示
2.1. 工程结构图
2.2. 核心代码
2.2.1. main.js
2.2.2. App.vue
2.2.3. BaseOne.vue
2.2.4. BaseTwo.vue
2.3. 运行效果
2.4. 调整代码
2.4.1. BaseTwo.vue
2.4.2. 运行效果
三、scoped原理
一、引言
前面的几个章节在介绍组件的时候我们提到过，Vue组件是由<template>、<style>和<script>三大部分组成，那么本章节我们将对组件中的样式做一个再深入讲解。
日常开发过程中，我们经常会碰到一些HTML元素样式冲突的情况，且排查和管理比较耗费精力，那么Vue在组件的样式方面，是怎样处理冲突的呢？这就要提到Vue组件样式中的scoped属性：
默认情况：写在Vue组件中的样式会全局生效 → 因此很容易造成多个组件之间的样式冲突问题。
1. 全局样式: 默认组件中的样式会作用到全局
2. 局部样式: 可以给组件加上 scoped 属性, 可以让样式只作用于当前组件
二、案例演示
2.1. 工程结构图
2.2. 核心代码
2.2.1. main.js
import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')
2.2.2. App.vue
<template><div class="App"><BaseOne></BaseOne><BaseTwo></BaseTwo></div>
</template><script>
import BaseOne from './components/BaseOne.vue'
import BaseTwo from './components/BaseTwo.vue'
export default {components: {BaseOne,BaseTwo}
}
</script><style></style>2.2.3. BaseOne.vue
<template><div>BaseOne</div>
</template><script>
export default {}
</script><style>
</style>2.2.4. BaseTwo.vue
<template><div>BaseOne</div>
</template><script>
export default {}
</script><style>
</style>2.3. 运行效果
我们会发现组件BaseTwo中的样式对App.vue和BaseOne.vue生效了，即全局生效：
2.4. 调整代码
2.4.1. BaseTwo.vue
<template><div>BaseTwo</div>
</template><script>
export default {}
</script><style scoped>
/** 默认样式会作用于全局*/
div {border: 3px solid blue;margin: 30px;
}
</style>2.4.2. 运行效果
我们将BaseTwo中的样式增加scoped属性，我们能看到这个样式只对当前组件生效：
三、scoped原理
我们在日常项目开发的过程中，要注意的是组件应该有着自己独立的样式，因此推荐加上scoped属性，scoped的原理如下
1. 当前组件内标签都被添加 data-v-hash值的属性
2. css选择器都被添加 [data-v-hash值] 的属性选择器
最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到
