Di Vue, slot adalah penting untuk membina komponen yang boleh diguna semula dan fleksibel, dan terdapat tiga jenis utama: lalai, dinamakan, dan scoped. Slot lalai membenarkan ibu bapa lulus kandungan ke dalam komponen kanak-kanak tanpa penempatan khusus, sesuai untuk komponen seksyen tunggal seperti kad. Slot yang dinamakan membolehkan beberapa titik penyisipan kandungan dengan memberikan nama kepada slot, memberikan kawalan yang tepat di mana setiap kandungan muncul, seperti dalam tajuk, footer, atau sidebars. Slot scoped pergi lebih jauh dengan membenarkan data dari komponen kanak -kanak diluluskan kembali kepada ibu bapa, yang membolehkan rendering dinamik berdasarkan keadaan dalaman sambil mengekalkan pemisahan kebimbangan. Jenis slot ini secara kolektif meningkatkan kebolehgunaan, penyesuaian, dan penyelarasan dalam reka bentuk komponen VUE.

Apabila membina komponen yang boleh diguna semula di Vue, salah satu alat yang paling berkuasa untuk komposisi adalah slot . Mereka membiarkan anda lulus kandungan ke dalam komponen dari ibu bapa, menjadikannya lebih fleksibel dan dinamik. Terdapat tiga jenis slot utama dalam Vue: lalai , dinamakan , dan scoped (juga dikenali sebagai prop render atau slot scoped ). Setiap mempunyai kes penggunaannya sendiri dan membantu anda menyusun UI anda dengan lebih berkesan.

Mari kita pecahkan mereka satu demi satu dan lihat bagaimana mereka membantu dengan reka bentuk komponen.

Slot lalai - cara asas untuk lulus kandungan

Slot lalai adalah jenis yang paling mudah. Ia membolehkan komponen induk untuk lulus mana -mana kandungan templat HTML atau VUE ke dalam komponen kanak -kanak.

Sebagai contoh, bayangkan anda mempunyai komponen <card></card> yang membungkus beberapa kandungan:

 <!-card.vue->
<pemat>
  <div class = "card">
    <div class = "card-body">
      <slot> </slot>
    </div>
  </div>
</template>

Anda kemudian boleh menggunakannya seperti ini:

 <!-ParentComponent.vue->
<card>
  <p> Ini adalah kandungan di dalam kad. </P>
</Card>

Ini berfungsi dengan baik apabila anda hanya perlu menyuntik sekeping kandungan. Tetapi bagaimana jika anda ingin meletakkan bahagian kandungan yang berlainan dalam bidang tertentu komponen? Di situlah slot bernama masuk.

Slot bernama - menyesuaikan bahagian tertentu

Slot yang dinamakan membolehkan anda menentukan beberapa titik penyisipan dalam komponen. Anda memberikan setiap slot nama, dan komponen induk menentukan kandungan mana yang pergi ke mana.

Berikut adalah contoh menggunakan komponen susun atur:

 <!-susun atur.vue->
<pemat>
  <header>
    <slot name = "header"> </slot>
  </header>
  <tain>
    <slot> </slot> <!-Slot lalai->
  </main>
  <cooter>
    <slot name = "footer"> </slot>
  </footer>
</template>

Dan inilah cara anda menggunakannya:

 <!-ParentComponent.vue->
<sepledout>
  <template #header>
    <h1> Tajuk halaman </h1>
  </template>

  <p> Kandungan halaman utama pergi ke sini. </P>

  <template #footer>
    <p> Copyright ? 2025 </p>
  </template>
</Susun atur>

• Gunakan #header atau v-slot:header untuk menyasarkan slot bernama.
• Slot lalai masih berfungsi tanpa nama.
• Ini memberi anda kawalan ke mana setiap bahagian templat ibu bapa muncul dalam komponen kanak -kanak.

Slot Scoped - Lulus Data Kembali ke Ibu Bapa

Slot scoped sedikit lebih maju tetapi sangat berguna. Mereka membenarkan komponen kanak -kanak untuk menyampaikan data kembali kepada ibu bapa, yang kemudiannya boleh digunakan dalam kandungan slot.

Fikirkan ia seperti memberikan akses induk kepada data komponen dalaman supaya ia dapat menyesuaikan rendering.

Contoh: Komponen senarai yang boleh diguna semula yang membolehkan ibu bapa memutuskan bagaimana setiap item dipaparkan.

 <!-list.vue->
<pemat>
  <ul>
    <li v-for = "item dalam item": key = "item.id">
      <slot: item = "item"> </slot>
    </li>
  </ul>
</template>

<script>
Eksport Lalai {
  data () {
    kembali {
      Item: [
        {id: 1, label: &#39;epal&#39;},
        {id: 2, label: &#39;pisang&#39;},
        {id: 3, label: &#39;ceri&#39;}
      ]
    };
  }
};
</script>

Sekarang ibu bapa dapat menyesuaikan bagaimana setiap item kelihatan:

 <!-ParentComponent.vue->
<List v-slot = "{item}">
  <strong> {{item.label}} </strong>
</List>

• Kanak -kanak itu melewati item ke skop slot.
• Ibu bapa menggunakan pemusnahan ( { item } ) untuk mendapatkan data tersebut.
• Ini menjadikan komponen sangat disesuaikan tanpa mengubah logik dalamannya.

Anda juga boleh menggabungkan slot scoped dengan slot bernama jika diperlukan:

 <!-complexcomponent.vue->
<pemat>
  <slot name = "default": user = "user": roles = "roles"> </slot>
</template>

Kemudian gunakannya seperti:

 <SpomplexComponent>
  <template #default = "{user, roles}">
    <p> pengguna: {{user.name}} </p>
    <ul>
      <li v-for = "peranan dalam peranan": key = "peranan"> {{role}} </li>
    </ul>
  </template>
</ComplexComponent>

Mengapa menggunakan slot?

Slot adalah penting kerana mereka menggalakkan kebolehgunaan dan penyesuaian pada masa yang sama. Dengan slot, anda boleh:

• Membina pembalut UI generik (seperti modal, kad, susun atur) yang menerima sebarang kandungan.
• Biarkan komponen induk menentukan bagaimana bahagian -bahagian tertentu diberikan sambil mengekalkan struktur keseluruhan konsisten.
• Kongsi logik dalam komponen sambil membiarkan ibu bapa mengawal visual melalui slot scoped.

Mereka amat berguna apabila membuat perpustakaan komponen atau merancang susun atur yang boleh diguna semula.

Jadi ya, slot dalam Vue - lalai, dinamakan, dan scoped - bukan hanya mengenai memasukkan kandungan. Mereka mengenai membolehkan struktur komponen pintar, fleksibel, dan dikekalkan. Pada asasnya, mereka membuat komponen anda berasa hidup dan boleh disesuaikan.

Atas ialah kandungan terperinci Apakah slot (lalai, dinamakan, scoped) dalam Vue, dan bagaimana ia membolehkan komposisi komponen fleksibel?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!