在Vue 3中，你可以使用CSS变量（也被称为自定义属性）来动态地设置和更新组件的样式。Vue 3提供了`<style vars>`块，使你可以在单个组件中定义CSS变量。

以下是一个示例，展示如何在Vue 3中使用CSS变量：

<template><div :style="`--bg-color: ${bgColor}`"><h1 :style="`background-color: var(--bg-color)`">Hello Vue 3</h1><button @click="changeColor">Change Color</button></div>
</template><script>
export default {data() {return {bgColor: 'red',};},methods: {changeColor() {this.bgColor = this.bgColor === 'red' ? 'blue' : 'red';},},
};
</script><style vars>
h1 {color: white;padding: 1rem;
}
</style>

在上面的示例中，我们在`<style vars>`块中定义了一个CSS变量`--bg-color`。然后，在组件的模板中，我们通过绑定`:style="`--bg-color: ${bgColor}`"`将`bgColor`变量绑定到样式中的`--bg-color`变量上。同时，在`<h1>`标签中，我们使用`var(--bg-color)`来引用并使用该CSS变量。

在组件的方法中，`changeColor`方法用于切换`bgColor`变量的值。当按钮被点击时，`bgColor`变量会在`red`和`blue`之间切换。

通过以上的示例，我们可以动态地改变组件的背景色，而无需直接操作DOM元素。这使得我们可以更方便地根据条件或用户输入来改变组件的样式。