Bagaimana Menggayakan Komponen Kanak-Kanak dalam Vue.js Menggunakan Pemilih CSS?

Menggayakan Komponen Kanak-kanak dalam Vue.js dengan /deep/, >>>, atau ::v-deep

Dalam konteks Vue.js , penggayaan berbutir komponen kanak-kanak boleh dicapai menggunakan pemilih CSS tertentu. Walau bagaimanapun, isu mungkin timbul semasa pelaksanaan.

Vue 2.0 - 2.6

Untuk menembusi komponen anak dan memilih elemen bersarang, anda boleh menggunakan sama ada ::v- dalam (dengan Sass) atau >>> (tanpa Sass) dalam peraturan CSS anda, seperti berikut:

Sass:

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

CSS lain:

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

Perhatikan bahawa teg untuk komponen mesti mempunyai atribut berskop untuk pemilih ini berfungsi.

Vue 3 (dan Vue 2.7)

Dalam Vue 3, :: v- awalan telah ditamatkan. Sebaliknya, gunakan pemilih :deep bersatu, tetapi sintaks yang disyorkan adalah untuk menyertakan pemilih dalam kurungan:

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

Penyelesaian ini juga boleh digunakan untuk Vue 2.7, keluaran terakhir Vue 2 .

Pemilih Tambahan dalam Vue 3

1. :slotted(.slot-class): Menyasarkan kandungan melalui .
2. :global(. kelas saya): Digunakan pada elemen tertentu secara global, walaupun dari skop komponen.

Semua pemilih mesti digunakan dalam teg untuk kefungsian yang betul.

Pertimbangan Tambahan

• /deep/ sintaks ditamatkan dalam semua versi.
• ::v-prefix ditamatkan dalam Vue 3 dan di atas.
• >>> sintaks ditamatkan dalam Vue 3 dan ke atas.

Dengan menggunakan teknik penggayaan ini, anda boleh menyasarkan dan menyesuaikan penampilan elemen dengan berkesan dalam komponen anak dalam aplikasi Vue.js anda.

Atas ialah kandungan terperinci Bagaimana Menggayakan Komponen Kanak-Kanak dalam Vue.js Menggunakan Pemilih CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!