Mengapa Vue.js Saya ::v-deep, >>>, dan Pemilih Dalam Tidak Berfungsi?

>>, dan Pemilih Dalam Berfungsi? " />

Menyelesaikan masalah Vue.js ::v-deep, >>> dan Pemilih Dalam

Latar Belakang

Vue.js menyediakan cara untuk menggayakan elemen dalam komponen bersarang menggunakan pemilih dalam seperti ::v-deep, >>>, dan :deep Walau bagaimanapun, isu timbul apabila pemilih ini dilaksanakan.

Masalah

Percubaan untuk menggunakan ::v-deep atau >. ;>> untuk menyasarkan elemen kanak-kanak dari dalam komponen Vue tidak menyebabkan peraturan gaya diserahkan secara verbatim pelayar.

Penyelesaian

Vue 2.0 - 2.6

Sass: Gunakan ::v-deep

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

Tanpa Sass: Gunakan >>>

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

Pastikan teg

<style scoped></style>

Vue 3 (dan Vue 2.7)

Gunakan :deep(.child-class)

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

Pemilih Baharu Vue 3

Selain itu, Vue 3 menawarkan:

• Kandungan slot : Gunakan :slotted(.child-class)
• Gaya global: Gunakan :global(.my-class)

Sekali lagi, teg

<style scoped></style>

Pek Web Konfigurasi

Jika menggunakan Vue Loader, pastikan konfigurasi anda termasuk:

{
  test: /\.vue$/,
  use: 'vue-loader',
}

Ringkasan

Vue 2:

• Gunakan ::v-deep in Sass, >>> tanpa Sass
• Pastikan tag adalah skop

Vue 3:

• Gunakan :deep(.child-class)
• The ::v- awalan ditamatkan
• Gunakan pemilih :slotted dan :global sebagai diperlukan
• Pastikan teg adalah skop

Nota: Sintaks /deep/ ditamatkan dalam kedua-dua Vue 2 dan 3.

Atas ialah kandungan terperinci Mengapa Vue.js Saya ::v-deep, >>>, dan Pemilih Dalam Tidak Berfungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!