Vue 3 中的 deep 选择器

11 min read

在Vue 3中，deep选择器是一种特殊的选择器，用于匹配所有子组件，包括嵌套的子组件。它使用>>>符号表示。

使用deep选择器，可以通过以下方式选择所有子组件的元素和样式。

<style scoped>
/* 选择所有子组件的带有red类的元素 */
::v-deep .red {
  color: red;
}
</style>

<template>
  <div>
    <ChildComponent>
      <div class="red">Some Text</div>
    </ChildComponent>
  </div>
</template>

在上面的示例中，deep选择器将选择所有ChildComponent组件内带有red类的元素，并将其文本颜色设置为红色。

需要注意的是，deep选择器只在使用了CSS预处理器（如Sass或Less）的情况下才可用。在常规CSS中，可以使用>>>或/deep/选择器表示深度选择器。