第十八章 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值] 的属性选择器

最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到