Bagaimana Menggayakan Komponen Kanak-kanak dalam Vue.js Menggunakan /deep/, >>>, ::v-deep, dan :deep?

>>, ::v-deep, dan :deep? " />

Cara Menggunakan /deep/, >>>, atau ::v-deep in Vue.js

Apabila bekerja dengan struktur komponen dalam Vue.js, penggunaan peraturan gaya pada elemen dalam komponen kanak-kanak menjadi perlu Di sini, Vue menyediakan beberapa pilihan untuk mencapai ini: /deep/, >>>, dan ::v-deep.

Vue 2.0 - 2.6

Sass: Gunakan ::v-deep untuk menembusi komponen kanak-kanak sempadan:

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

CSS Biasa: Gunakan >>> untuk mencapai kesan yang sama:

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

Vue 3 (dan Vue 2.7)

Bersatu Pemilih: Vue 3 memperkenalkan :deep sebagai pemilih bersatu, tanpa mengira penggunaan Sass:

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

Kandungan Slot: Elemen penggayaan melalui slot:

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

Gaya Global: Menggunakan gaya secara global daripada skop komponen:

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

Pertimbangan Utama:

• Semua gaya mesti ditakrifkan dalam teg