如何使用 /deep/、>>>、::v-deep 和 :deep 在 Vue.js 中设置子组件的样式？

>>、::v-deep 和 :deep? " />

如何在 Vue.js 中使用 /deep/、>>> 或 ::v-deep

使用组件结构时在 Vue.js 中，将样式规则应用于子组件中的元素变得必要，这里，Vue 提供了几个选项来实现此目的：/deep/、>>> 和::v-deep.

Vue 2.0 - 2.6

Sass: 利用 ::v-deep 穿透子组件边界:

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

纯 CSS：使用>>来达到相同的效果：

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

Vue 3（和Vue 2.7）

统一选择器： Vue 3 引入 :deep 作为统一选择器，与 Sass 无关用法：

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

插槽内容： 通过插槽传递的样式元素：

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

全局样式： 从作用域组件全局应用样式:

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

钥匙注意事项：

• 所有样式都必须在作用域
• 在 Vue 3 中，::v-deep 已被弃用，取而代之的是 :deep。
• >> 在 Vue 中也已弃用3.

示例（Vue 3）：

<template>
  <div class="parent">
    <child-component>
      <slot>Slotted content</slot>
    </child-component>
  </div>
</template>

<script>
export default {
  setup() {
    return {
      scopedStyle: ':deep(.child-component-class) { background-color: red; }',
    };
  },
};
</script>

<style scoped>
  :slotted(.slot-class) { color: blue; }
  {{ scopedStyle }}
</style>

通过理解这些选择器和作用域原则，您可以有效地定位 Vue 中子组件内的元素.js.

以上是如何使用 /deep/、>>>、::v-deep 和 :deep 在 Vue.js 中设置子组件的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！