在vue3中怎么使用:deep

在 Vue 3 中，:deep 用于在 <style> 标签内的样式中，选择子组件内部的元素。这是为了在使用 scoped 样式时，依然能够影响到子组件或其内部的深层次元素。它的作用类似于 Vue 2 中的 >>> 或 /deep/，但是 Vue 3 提供了更好的语法，推荐使用 :deep()。

用法

1. 基本用法：
   当你的组件样式使用 scoped，你想要影响到子组件中的元素时，可以使用 :deep()。

   <template>
     <div class="parent">
       <ChildComponent />
     </div>
   </template>
   
   <style scoped>
   /* 作用于 ChildComponent 内部的某个元素 */
   :deep(.child-element) {
     color: red;
   }
   </style>
   

2. 嵌套用法：
   你可以将 :deep() 作为一个选择器的一部分，或与其他选择器组合。

   <style scoped>
   /* 作用于子组件内部的 .child-element，并且父级是 .parent */
   .parent :deep(.child-element) {
     color: red;
   }
   </style>
   

3. 使用多个选择器：
   你可以在多个嵌套的元素中使用 :deep()。

   <style scoped>
   .parent :deep(.child-element) :deep(.deep-child-element) {
     font-size: 18px;
   }
   </style>
   

为什么需要 :deep

当你使用 scoped 样式时，Vue 会自动为你的样式加上一个独特的属性选择器（如 data-v-xxxx），以确保这些样式只作用于当前组件。为了能够影响子组件内的元素，Vue 提供了 :deep()，用来明确表示这些样式是希望跨越组件边界的。

注意事项

• :deep() 只能在 scoped 样式中使用，如果你不使用 scoped，则不需要使用 :deep()，因为样式默认是全局的。
• 如果你不想影响到子组件的样式，最好保持样式的封闭性，不使用 :deep()。

这样可以确保你在 Vue 3 的 scoped 样式下，有选择性地影响子组件的内部元素。