Vue3 style中新增的特性有哪些及怎么用

Vue3 在样式处理方面引入了一些新的特性，使得开发者能够更加灵活地处理组件的样式。本文将介绍 Vue3 中新增的样式特性，并展示如何使用这些特性。

1. v-bind 在 <style> 中的使用

Vue3 允许在 <style> 标签中使用 v-bind 来绑定动态的 CSS 值。这意味着你可以将组件的状态（如 data 或 props）直接绑定到样式中。

示例

<template>
  <div class="dynamic-style">
    <p>This is a dynamic style example.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red',
      fontSize: '20px'
    };
  }
};
</script>

<style scoped>
.dynamic-style {
  color: v-bind(color);
  font-size: v-bind(fontSize);
}
</style>

在这个例子中，color 和 fontSize 是组件的数据属性，它们被绑定到 v-bind 中，从而动态地应用到样式上。

2. :deep() 选择器

在 Vue3 中，scoped 样式默认只会影响当前组件的元素。如果你需要影响子组件的样式，可以使用 :deep() 选择器。

示例

<template>
  <div class="parent">
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>

<style scoped>
.parent :deep(.child-class) {
  color: blue;
}
</style>

在这个例子中，.child-class 是 ChildComponent 中的一个类名，通过 :deep() 选择器，parent 组件可以影响 ChildComponent 的样式。

3. :slotted() 选择器

Vue3 引入了 :slotted() 选择器，用于选择插槽中的内容并应用样式。

示例

<template>
  <div class="slot-container">
    <slot></slot>
  </div>
</template>

<style scoped>
.slot-container :slotted(p) {
  color: green;
}
</style>

在这个例子中，slot-container 组件中的插槽内容如果是 <p> 标签，将会被应用绿色的文字颜色。

4. :global() 选择器

如果你需要在 scoped 样式中定义全局样式，可以使用 :global() 选择器。

示例

<template>
  <div class="global-style">
    <p>This is a global style example.</p>
  </div>
</template>

<style scoped>
:global(.global-class) {
  color: purple;
}
</style>

在这个例子中，.global-class 是一个全局样式类，即使它在 scoped 样式中定义，也会应用到整个应用中的 .global-class 元素。

5. v-bind 与 CSS 变量

Vue3 还支持在 v-bind 中使用 CSS 变量，这使得样式的动态化更加灵活。

示例

<template>
  <div class="css-variable">
    <p>This is a CSS variable example.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      primaryColor: 'orange'
    };
  }
};
</script>

<style scoped>
.css-variable {
  --primary-color: v-bind(primaryColor);
  color: var(--primary-color);
}
</style>

在这个例子中，primaryColor 是一个数据属性，它被绑定到 CSS 变量 --primary-color 上，从而动态地应用到样式上。

6. v-bind 与 @keyframes

Vue3 还支持在 @keyframes 中使用 v-bind，这使得动画的样式也可以动态化。

示例

<template>
  <div class="animated-box"></div>
</template>

<script>
export default {
  data() {
    return {
      animationDuration: '2s'
    };
  }
};
</script>

<style scoped>
.animated-box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: spin v-bind(animationDuration) linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

在这个例子中，animationDuration 是一个数据属性，它被绑定到 @keyframes 的动画持续时间上，从而动态地控制动画的速度。

总结

Vue3 在样式处理方面引入了许多新特性，如 v-bind 在 <style> 中的使用、:deep() 选择器、:slotted() 选择器、:global() 选择器、v-bind 与 CSS 变量的结合，以及 v-bind 与 @keyframes 的结合。这些特性使得开发者能够更加灵活地处理组件的样式，提升了开发效率和代码的可维护性。