如何使用 /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中文網其他相關文章！