尤大在 Vue的生态进展中提到的＜style＞动态变量注入

在 Vue RFC 中有一个关于样式的提案 SFC style CSS variable injection，这个 RFC 为Vue开发者提供了一种使用组件的响应性数据作为CSS变量的方法。

在Vue 3中，只需一个简单的语法，我们就可以在运行时更新样式。

在本文中，我们将了解如何使用这些SFC样式，它是如何工作的，然后了解一些来自RFC的高级知识。

1.如何使用SFC样式？ 2. Vue中的响应式样式 3. Vue SFC 样式变量如何工作 4. 需要知道的一些知识 5.CSS变量在子组件中不可用 6.使用前检查浏览器支持情况

Single File Component : 单文件组件，简称 SFC

如何使用SFC样式？ 要使用这个特性，只需要两个步骤：

在组件的script中声明一个响应式变量。 在 css 中使用 v-bind 来使用这个变量。 来个粟子：

<template>
<div>
  <div class="text">hello</div>
</div>
</template>

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

<style>
.text {
    color: v-bind(color);
}
</style>

很简单。