vue组件中的样式属性scoped实例详解

当我们在Vue组件中编写样式时，我们往往希望这些样式只在当前组件中生效，避免出现样式污染的问题。为了解决这个问题，Vue提供了一个特殊的属性scoped。

什么是scoped属性？

在Vue组件<style>标签中添加scoped属性后，所有样式都将局限于该组件中，不会泄露到父组件、子组件、甚至全局DOM中。

示例1：使用scoped属性

下面是一个简单的示例。我们创建一个名为child-component的子组件，该组件包含一个具有红色文本颜色的标题。请注意，在子组件的<style>标签中，我们添加了scoped属性。

<template>
  <div>
    <h2>{{title}}</h2>
  </div>
</template>

<script>
export default {
  name: 'child-component',
  props: {
    title: String
  }
}
</script>

<style scoped>
h2 {
  color: red;
}
</style>

如果使用scoped属性，则父组件无法覆盖子组件中的样式。

<template>
  <div>
    <child-component title="Hello, world!"></child-component>
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent';

export default {
  components: {
    ChildComponent
  }
}
</script>

<style>
h2 {
  color: green;
}
</style>

在这个示例中，子组件的标题文本将呈现红色。即使在父组件的样式中为h2元素指定了绿色颜色，但是该样式仅影响父组件中的h2，对于子组件不会生效。

示例2：深度选择器

使用scoped属性时，有一个重要的限制，那就是子选择器（例如ul > li）和后代选择器（例如ul li）不能穿透到子组件的样式中。

为了解决这个问题，Vue提供了一个深度选择器/deep/，可以用来解决这个限制。

<template>
  <div>
    <ul>
      <li class="list-item">List Item 1</li>
      <li class="list-item">List Item 2</li>
      <li class="list-item">List Item 3</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'list-component'
}
</script>

<style scoped>
/deep/ .list-item {
  color: red;
}
</style>

在这个示例中，我们创建了一个名为list-component的组件，其中包含一个有序列表。/deep/选择器用于将样式应用于所有类名为list-item的列表项。

请注意，如果您使用的是Vue 2.x，请使用>>>选择器而不是/deep/，因为/deep/将在Vue 3.x中被弃用。