Vue 与 scoped

在 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>

注意事项

1. 动态生成的内容：scoped 样式不会自动应用到通过 JavaScript 动态生成的内容中。如果你需要为动态生成的内容应用样式，确保这些内容包含正确的作用域属性。

2. 第三方库：如果使用第三方库生成的 HTML 结构，可能需要手动添加作用域属性，或者使用全局样式。

3. 性能：虽然 scoped 样式提供了很大的便利，但在大型项目中使用过多的 scoped 样式可能会影响性能，因为每个组件的样式都需要单独处理。

总结

scoped 属性是 Vue 提供的一种方便的方式，用于确保组件样式的独立性和模块化。