在 Vue 中，scoped 是一个用于 <style> 标签的特殊属性，它的作用是将样式限定在当前组件的范围内，避免样式污染其他组件。这对于大型项目尤其有用，因为它可以确保组件的样式是独立的，不会意外地影响到其他组件。
使用 scoped
在 Vue 组件中，你可以通过在 <style> 标签上添加 scoped 属性来实现样式的局部作用域。例如：
<template>
<div class="example">
<p>This is a scoped style example.</p>
</div>
</template>
<script>
export default {
name: 'ScopedExample'
}
</script>
<style scoped>
.example {
color: blue;
}
p {
font-size: 20px;
}
</style>
在这个示例中，.example 和 p 的样式只会应用于 ScopedExample 组件内部的元素，而不会影响到其他组件中的相同类名或标签名的元素。
工作原理
当你使用 scoped 属性时，Vue 会在编译过程中为每个组件生成一个唯一的属性（例如 data-v-xxxxxx），并将这个属性添加到组件的根元素和所有相关的 CSS 选择器中。这样可以确保样式只应用于当前组件的元素。
例如，上面的示例在编译后可能会变成这样：
<template>
<div class="example" data-v-123456>
<p data-v-123456>This is a scoped style example.</p>
</div>
</template>
<style>
.example[data-v-123456] {
color: blue;
}
p[data-v-123456] {
font-size: 20px;
}
</style>
深度选择器
有时可能需要将样式应用到子组件的深层元素。在这种情况下，可以使用深度选择器 >>> 或 /deep/。例如：
<template>
<div class="parent">
<ChildComponent />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
name: 'ParentComponent',
components: {
ChildComponent
}
}
</script>
<style scoped>
.parent >>> .child {
color: red;
}
</style>
或者：
<style scoped>
.parent /deep/ .child {
color: red;
}
</style>
注意事项
-
动态生成的内容：
scoped样式不会自动应用到通过 JavaScript 动态生成的内容中。如果你需要为动态生成的内容应用样式，确保这些内容包含正确的作用域属性。 -
第三方库：如果使用第三方库生成的 HTML 结构，可能需要手动添加作用域属性，或者使用全局样式。
-
性能：虽然
scoped样式提供了很大的便利，但在大型项目中使用过多的scoped样式可能会影响性能，因为每个组件的样式都需要单独处理。
总结
scoped 属性是 Vue 提供的一种方便的方式，用于确保组件样式的独立性和模块化。