Panduan komprehensif untuk slot vue

Inti pembangunan aplikasi web moden adalah komponen. Setiap aplikasi terdiri daripada pelbagai komponen yang bekerjasama untuk membentuk keseluruhannya. Untuk digunakan semula dalam senario yang berbeza dan juga dalam aplikasi yang berbeza, komponen -komponen ini perlu mempunyai fleksibiliti dan kebolehgunaan yang paling besar. Ramai kerangka (khususnya VUE) menggunakan mekanisme yang dipanggil "slot" untuk memenuhi keperluan ini.

slot adalah mekanisme pengagihan kandungan dan gabungan yang kuat dan serba boleh. Anda boleh memikirkan slot sebagai templat yang disesuaikan (sama dengan templat PHP) yang boleh digunakan di lokasi yang berbeza dan dalam pelbagai kes penggunaan, menghasilkan kesan yang berbeza. Sebagai contoh, dalam rangka UI seperti vuetify, slot digunakan untuk membuat komponen biasa, seperti komponen amaran. Dalam komponen ini, slot berfungsi sebagai ruang letak untuk kandungan lalai dan sebarang kandungan tambahan/pilihan (seperti ikon, imej, dll.).

Slot membolehkan anda menambah sebarang struktur, gaya, dan fungsi kepada komponen tertentu. Dengan menggunakan slot, pemaju dapat mengurangkan jumlah prop yang digunakan dalam satu komponen, menjadikan komponen lebih mudah dan mudah dikendalikan.

Tutorial ini akan meneroka bagaimana untuk mengambil kesempatan daripada slot dalam Vue 3. Mari bermula.

mata utama

slot Vue meningkatkan fleksibiliti komponen: slot dalam vue.js membolehkan penempatan dinamik kandungan dalam komponen, menjadikannya sangat boleh diguna semula dan disesuaikan dengan konteks yang berbeza.
slot asas dan slot skop: Vue menawarkan dua jenis slot slot -asas dan slot skop. Slot asas digunakan untuk penggantian kandungan mudah, manakala slot skop membolehkan akses kepada data subkomponen, membolehkan integrasi kandungan yang lebih kompleks dan interaktif.
Pelbagai slot dan slot bernama menambah kerumitan struktur: Untuk komponen yang memerlukan pelbagai bidang kandungan, VUE menyokong pelbagai slot, termasuk slot bernama, yang membantu mengatur kandungan dengan lebih berkesan dan meningkatkan penyelenggaraan fungsi.
Slot vs Props: Walaupun prop adalah kritikal untuk meluluskan data ke komponen, slot menyediakan penyelesaian yang lebih fleksibel untuk menguruskan struktur kandungan kompleks dan mengurangkan kebergantungan pada prop untuk pengagihan kandungan.
Aplikasi praktikal slot: slot VUE tidak terhad kepada kandungan statik, tetapi juga boleh digunakan untuk menyampaikan templat lengkap atau fungsi interaktif, dengan itu meningkatkan fungsi dan interaktiviti komponen.
Gunakan slot dengan prop untuk reka bentuk komponen terbaik: Amalan terbaik adalah menggunakan slot untuk pengurusan kandungan dan prop untuk pemprosesan data dalam komponen, yang boleh menjadikan komponen lebih cekap dan lebih jelas.

Penggunaan slot asas

Vue terutamanya menawarkan dua slot: slot mudah dan slot skop. Mari kita mulakan dengan slot mudah. Pertimbangkan contoh berikut:

const app = Vue.createApp({})

app.component('primary-button', {
  template: `
    <button>
      <slot>OK</slot>
    </button>
  `
})

app.mount('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bapp')

di sini, kami mempunyai komponen butang utama. Kami mahu teks butang disesuaikan, jadi kami menggunakan komponen slot di dalam elemen butang untuk menambah ruang letak teks. Jika kita tidak memberikan nilai tersuai, kita juga mahu nilai biasa lalai (sandaran). Vue menggunakan semua yang kami masukkan ke dalam komponen slot sebagai kandungan slot lalai. Jadi kita hanya perlu meletakkan teks "OK" di dalam komponen. Sekarang kita boleh menggunakan komponen seperti ini:

<div id="app">
  <primary-button></primary-button>
</div>

Hasilnya adalah butang dengan teks "OK" kerana kami tidak memberikan nilai apa pun. Tetapi bagaimana jika kita mahu membuat butang dengan teks tersuai? Dalam kes ini, kami menyediakan teks tersuai dalam pelaksanaan komponen seperti berikut:

<div id="app">
  <primary-button>Subscribe</primary-button>
</div>

di sini, Vue mengambil teks tersuai "melanggan" dan menggunakannya dan bukannya teks lalai.

Seperti yang anda lihat, walaupun dalam contoh mudah ini, kita boleh mendapatkan banyak fleksibiliti dalam cara membuat komponen. Tetapi ini hanya hujung gunung es. Mari kita lihat contoh yang lebih kompleks.

Bina komponen "Kalimat Hari"

Sekarang, kami akan membina komponen yang memaparkan ayat harian. Inilah kod:

const app = Vue.createApp({})

app.component('quote', {
  template: `
    <div>
      <h2>The quote of the day says:</h2>
      <p>
        <slot></slot>
      </p>
    </div>
  `
})

app.mount('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bapp')

<div id="app">
  <quote>
    <div class="quote-box">
      <span class="quote-text">"Creativity is just connecting things."</span>
      <br>
      - Steve Jobs
    </div>
  </quote>
</div>

.quote-box {
  background-color: lightgreen;
  width: 300px;
  padding: 5px 10px;
}

.quote-text {
  font-style: italic;
}

Dalam contoh ini, kami membuat tajuk yang kandungannya akan tetap sama, dan kemudian kami meletakkan komponen slot dalam perenggan yang kandungannya akan berubah berdasarkan petikan hari itu. Apabila membuat komponen, Vue akan memaparkan tajuk dari komponen kutipan, diikuti dengan kandungan yang kami masukkan ke dalam tag kutipan. Juga perhatikan kelas CSS yang digunakan dalam penciptaan dan pelaksanaan petikan. Kita boleh gaya komponen dalam dua cara yang diperlukan.

menggunakan pelbagai slot

Walaupun slot tunggal sangat kuat, dalam banyak kes ini tidak mencukupi. Dalam senario kehidupan sebenar, kita biasanya memerlukan pelbagai slot untuk mendapatkan pekerjaan yang dilakukan. Nasib baik, Vue membolehkan kita menggunakan slot sebanyak yang kita mahu. Mari lihat cara menggunakan pelbagai slot dengan membina komponen kad mudah.

Bina komponen kad asas

kami akan membina komponen kad dengan tiga bahagian: Tajuk, Badan dan Footer:

const app = Vue.createApp({})

app.component('card', {
  template: `
    <div>
      <slot name="header"></slot>
      <main>
        <slot></slot>
      </main>
      <slot name="footer"></slot>
    </div>`
})

app.mount('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bapp')

<div id="app">
  <card>
    <template v-slot:header>
      <h2>Card Header Title</h2>
    </template>

    <template v-slot:default>
      <p>
        Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
      </p>
    </template>

    <template v-slot:footer>
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Save</a> -
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Edit</a> -
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Delete</a>
    </template>
  </card>
</div>

Untuk menggunakan pelbagai slot, kita mesti memberikan nama untuk setiap slot. Satu -satunya pengecualian ialah slot lalai. Oleh itu, dalam contoh di atas, kami menambah atribut nama ke slot tajuk dan footer. Slot yang tidak memberikan nama dianggap sebagai slot lalai.

Apabila kita menggunakan komponen kad, kita perlu menggunakan elemen templat dengan Arahan V-Slot dan Slot Nama: V-Slot: [Slot-Name].

(bahagian yang tinggal diabaikan di sini kerana panjangnya terlalu panjang. Sila selektif mengekalkan atau memadam beberapa kandungan yang diperlukan.)

Atas ialah kandungan terperinci Panduan komprehensif untuk slot vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!