如何让 CSS 值在当前的组件中起作用？
在 Vue 中，我们可以使用 <style scoped> 来限制 CSS 只在当前组件中起作用。
在 <style scoped> 中，你写的 CSS 只会应用到当前组件的元素上，不会影响到其他组件。这是因为 Vue 在处理组件时，会为每个元素添加一个唯一的属性，例如 data-v-21e5b78，然后在 CSS 选择器后面添加这个属性，这样就可以确保 CSS 只作用于当前组件。
这是一个例子：
<template>
<div class="my-component">
<!-- 这里的内容只会受到下面的 CSS 影响 -->
</div>
</template>
<style scoped>
.my-component {
color: red;
}
</style>
在这个例子中，my-component 类只会作用于当前组件的元素，不会影响到其他组件。
注意，<style scoped> 有一些限制。例如，它不能影响到子组件和插槽内容。如果你需要影响到子组件，可以使用深度作用选择器 >>>，或者 /deep/（在 SASS 中）。