目录
一、引言
二、案例演示
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 = false
new 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值] 的属性选择器
最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到