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

Menggunakan Gaya pada Komponen Kanak-kanak dalam Vue.js: /deep/, >>>, dan ::v-deep

Dalam Vue.js, anda boleh menggunakan pemilih dalam untuk menggayakan elemen dalam komponen anak. Walau bagaimanapun, cubaan menggunakan operator /deep/, >>>, atau ::v-deep dalam peraturan gaya mungkin tidak berfungsi seperti yang diharapkan. Berikut ialah panduan tentang cara menggunakan operator ini dengan betul.

Vue 2.0 - 2.6

• Sass:

  Gunakan ::v-deep sebelum pemilih untuk menggunakan gaya pada elemen dalam kanak-kanak komponen.

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

• Tanpa Sass:

  Gunakan >>> sebelum pemilih untuk mencapai kesan yang sama.

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

Vue 3 (dan Vue 2.7)

• Sintaks Bersatu:

  Gunakan :deep() sebagai pemilih, melampirkan pemilih elemen sasaran dalam kurungan. Sintaks ini berfungsi dengan atau tanpa Sass.

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

• Sintaks Ditamatkan:

  Awalan ::v-deep kini ditamatkan penggunaannya dalam Vue 3. Yang >>> pengendali juga ditamatkan.

Pemilih Baharu Vue 3

• Kandungan Slot:

  Gunakan :slotted() untuk menggayakan kandungan yang dilalui slot.

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

• GlobalGlobal:

  Gunakan :global() untuk mendaftarkan gaya global daripada komponen berskop.

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

Skop Keperluan

Dalam semua versi Vue, teg yang dikaitkan dengan komponen menggunakan pemilih dalam mesti diskop.

<style scoped>

Ringkasan

• Dalam Vue 2, gunakan ::v-deep dengan Sass atau >>> tanpa Sass.
• Dalam Vue 3, gunakan :deep(.child-class).
• ::v-deep dan >>> ditamatkan dalam Vue 3.
• :slotted dan :pemilih global adalah baharu dalam Vue 3.
• Sentiasa skop tag apabila menggunakan pemilih dalam.

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