Vue学习：20-单文件组件CSS功能-优快云博客

默认情况下，写在.vue组件中的样式会全局生效，很容易造成多个组件之间的样式冲突问题导致组件之间样式冲突的根本原因是：

1、单页面应用程序中，所有组件的DOM结构，都是基于唯一的index.html页面进行呈现的

2、每个组件中的样式，都会影响整个index.html页面中的DOM元素

一、组件作用域CSS

当"<style>"标签带有scoped属性后：

1、它的CSS只会影响当前组件的元素，父组件的样式将不会渗透到子组件中

2、该组件的所有元素编译后会自带一个特定的属性

3、该"<style scoped>"内的选择器，在编译后会自动添加特定的属性选择器

4、子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响，主要是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式

Button.vue

<template>
  <div class="error">
    <h3>子标题</h3>
    <button>子普通按钮</button>
  </div>
</template>

App.vue

<script setup>
  import ButtonVue from './components/Button.vue'
</script>

<!-- 视图区域（view） -->
<template>
  <div class="error">
    <h3>父标题</h3>
    <button>父普通按钮</button>
  </div>

  <hr>
  <ButtonVue/>
</template>
<!-- scoped属性，让下方的选择器的样式只作用在该组件中，或者子组件的根元素上 -->
<style scoped>
h3 {
  border: 1px solid blue;
}
.error {
  border: 1px solid red;
  padding: 15px;
}
</style>

二、深度选择器

处于scoped样式中的选择器如果想要做更“深度”的选择，即影响到子组件，可以使用:deep()这个伪类

Button.vue

<template>
  <div class="error">
    <h3>子标题</h3>
    <button>子普通按钮</button>
  </div>
</template>

App.vue

<script setup>
  import ButtonVue from './components/Button.vue'
</script>

<!-- 视图区域（view） -->
<template>
  <div class="error">
    <h3>父标题</h3>
    <button>父普通按钮</button>
  </div>

  <hr>
  <ButtonVue/>
</template>
<!-- scoped属性，让下方的选择器的样式只作用在该组件中，或者子组件的根元素上 -->
<style scoped>
h3 {
  border: 1px solid blue;
}
.error {
  border: 1px solid red;
  padding: 15px;
}

/* 如果想在style scoped中让样式作用到子组件中，那么可以使用:deep()伪类选择器 */
.error:deep(button) {
  border: 2px solid green;
  padding: 8px 15px;
}

</style>

三、CSS中的v-bind()

1、单文件组件的"<style>"标签支持使用v-bind CSS函数将CSS的值链接到动态的组件状态

2、这个语法同样也适用于"<script setup>"，且支持JavaScript表达式（需要用引号包裹起来）

3、实际的值会被编译成哈希化的CSS自定义属性，因此CSS本身仍然是静态的

4、自定义属性会通过内联样式的方式应用到组件的某个元素上，并且在源值变更的时候响应式地更新

App.vue

<script setup>
  import { reactive } from 'vue';

  //按钮主题
  let btnTheme = reactive({
    backColor: '#000000', //背景色
    textColor: '#FFFFFF'  //文本色
  })
</script>

<!-- 视图区域（view） -->
<template>
  <button>普通按钮</button>

  <hr>

  背景色：<input type="color" v-model="btnTheme.backColor">
  文本色：<input type="color" v-model="btnTheme.textColor">
</template>
<style scoped>

  button {
    /* 使用v-bind()可以使用该组件中的数据源，如果绑定的数据源值发生变化，则样式也会随着更新 */
    background-color: v-bind('btnTheme.backColor');
    color: v-bind('btnTheme.textColor');
  }

</style>