/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에서는 Sass와 상관없이 통합 선택기로 :deep을 도입했습니다. 사용법:

: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 중국어 웹사이트의 기타 관련 기사를 참조하세요!