如何使用深度选择器在 Vue.js 中设置子组件的样式？

将样式应用于 Vue.js 中的子组件：/deep/、>>> 和 ::v-deep

在 Vue.js 中，您可以使用深层选择器来设置子组件中元素的样式。但是，尝试在样式规则中使用 /deep/、>>> 或 ::v-deep 运算符可能无法按预期工作。以下是如何正确使用这些运算符的指南。

Vue 2.0 - 2.6

• Sass:

  在选择器之前使用 ::v-deep 将样式应用于子元素内的元素

  ::v-deep .child-class {
    background-color: #000;
  }

• 没有 Sass：

  使用 >>>

  >>> .child-class {
    background-color: #000;
  }

Vue 3（和 Vue 2.7）

• 统一语法：

  使用 :deep() 作为选择器，将目标元素选择器括在括号内。无论有没有 Sass，此语法都适用。

  :deep(.child-class) {
    background-color: #000;
  }

• 已弃用的语法：

  Vue 中现已弃用 ::v-deep 前缀3.>>>>运算符也已弃用。

Vue 3 新选择器

• 插槽内容：

  使用 :slotted() 来设置传递的内容的样式slot.

  :slotted(.slot-class) {
    background-color: #000;
  }

• 全局样式：

  使用 :global() 从作用域组件注册全局样式。

  :global(.my-class) {
    background-color: #000;
  }

范围界定要求

在所有版本的 Vue 中，

<style scoped>

摘要

• 在 Vue 2 中，将 ::v-deep 与 Sass 或>>>>>
• 在 Vue 3 中，使用 :deep(.child-class)。
• ::v-deep 和 >>>在 Vue 3 中已弃用。
• :slotted 和 :global 选择器是 Vue 3 中的新增内容。
• 始终将

以上是如何使用深度选择器在 Vue.js 中设置子组件的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！