vue2和vue3深度选择器

有时我们可能想明确地制定一个针对子组件的规则。

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符。有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

vue2写法

1. >>>

<style scoped>
.a >>> .b { 
 /* ... */ 
}
</style>

2、 /deep/

<style lang="scss" scoped>
.a{
 /deep/ .b { 
  /* ... */ 
 }
} 
</style>

vue3写法

1. ::v-deep() 简写:deep()

<style lang="scss" scoped>
.a{
    ::v-deep(.b) { 
      /* ... */ 
     }
    :deep(.c){}
} 
</style>

2. 新伪元素 ::v-slotted() 简写 :slotted()

Vue 2.x 中，父组件通过 slot 传给子组件的内容是不受子组件局部样式的影响的。到了 Vue 3.x ，我们可以借助新伪元素::v-slotted()，实现子组件控制 slot 的样式。

::v-slotted(.foo) {}
:slotted(.foo){}

3. 新伪元素 ::v-global() 简写 :global()

在 Vue 2.x scoped styles 的样式只能在局部生效。但是到了 Vue 3.x, 这样的“局面”发生了变化。Vue 3.x 增加了一个全新的伪元素::v-global()，借助::v-global()，我们可以让 scoped styles 中的样式到全局中生效。

::v-global(.foo){}
:global(.foo){}