Panduan Slot Vue

Ikhtisar Slot Vue

Slot merupakan cara lain di Vue bagi komponen untuk menyuntikkan konten ke dalam komponen anak menggunakan kode templat.

Dalam hal keluaran akhir, slot menjalankan fungsi serupa dengan props di Vue — mengambil data dari komponen induk ke komponen anak. Slot juga berguna untuk membuat kode yang dapat digunakan kembali.

Namun, jika props meneruskan nilai data ke komponen, slot dapat langsung meneruskan kode templat. Hal ini memiliki beberapa keuntungan tergantung situasi:

• Komponen anak menjadi lebih dapat digunakan kembali — Anda dapat memberinya komponen berbeda tanpa perlu khawatir tentang format/nilai data yang konsisten.
• Jauh lebih fleksibel — Anda tidak harus selalu mengisi setiap nilai, sedangkan dengan props Anda harus memeriksa keberadaan nilai menggunakan v-if.
• Ini mungkin masalah pribadi, tetapi menurut saya komponen anak terlihat jauh lebih mudah dibaca.

Cara terbaik memahami slot adalah dengan melihat contoh penggunaannya dan apa yang sebenarnya terjadi.

Ikhtisar Slot Vue

Memulai dengan slot adalah kasus penggunaan umum di mana kita hanya mendeklarasikan slot di komponen anak dan menyuntikkan konten menggunakan komponen induk.

Mari kita lihat. Pertama, buat komponen induk bernama MyContainer:

<template> <div> <my-button>Klik Saya!</my-button> </div></template>

Selanjutnya, buat komponen anak MyButton:

<template> <div> <slot></slot> </div></template>

Ketika MyButton di-render, <slot> akan digantikan oleh "Klik Saya!" — konten dari induk.

Anda dapat meneruskan templat apa pun dari komponen induk, tidak hanya teks. Bisa berupa ikon Font Awesome, gambar, atau bahkan komponen lain.

Slot Bernama

Cara terbaik untuk mengatur sistem komponen berbasis slot adalah dengan memberi nama slot Anda. Dengan demikian Anda bisa memastikan konten disuntikkan ke bagian yang tepat dari komponen.

Seperti yang Anda duga, ini dilakukan dengan menambahkan atribut name ke slot di komponen anak. Kemudian untuk menambahkan konten dari induk, Anda cukup membuat elemen <template> lain dan meneruskan nama dalam atribut bernama v-slot.

Mari kita lihat contohnya.

BoxElement:

<template> <div> <slot name="header"></slot> <slot name="content"></slot> </div></template>

Kemudian komponen induk:

<template> <div> <box-element> <template #header> Ini akan disuntikkan sebagai slot header. </template> <template #content> Ini akan menjadi konten dari elemen </template> </box-element> </div></template>

Catatan: jika slot tidak diberi nama, maka slot tersebut akan memiliki nama default.

Slot bernama berguna saat membuat komponen yang membutuhkan banyak slot. Misalnya, kita ingin membuat komponen Article yang memiliki slot terpisah untuk header, area konten utama, dan komentar.

Dengan tiga area berbeda, kita perlu cara membedakannya; jika tidak, saat mencoba menyuntikkan konten dari komponen induk, aplikasi Vue tidak akan tahu slot mana yang ingin ditargetkan.

Di sinilah slot bernama menjadi sangat berguna.

Slot bernama membantu Anda menggunakan banyak slot. Namun mengapa ini berguna bagi pengembang Vue? Sederhananya, ini memungkinkan kita mengatur kode dengan lebih baik untuk pengembangan dan juga menulis kode yang lebih skalabel.

Dengan memisahkan bagian yang berbeda ke dalam slot masing-masing, kita dapat dengan mudah melihat di mana setiap bagian dari aplikasi akhir ditambahkan ke DOM.

Secara pribadi, menurut saya bagian terbesarnya adalah memungkinkan kita menggunakan slot di atas kode, sehingga styling menjadi jauh lebih mudah. Dalam contoh kita, komponen anak Article hanya memiliki tiga slot, namun dalam aplikasi nyata, slot akan terlihat seperti ini agar komponen dapat menambahkan gaya CSS ke setiap bagian.

<template> <div> <div class="title"> <h1> <slot name="title"> Judul Cadangan </slot> </h1> </div> <div class="content"> <p> <slot name="content"> Konten Cadangan </slot> </p> </div> <div class="comments"> <slot name="comments"> Komentar Cadangan </slot> </div> </div></template>

Dalam contoh ini, lebih mudah melihat mengapa kita memerlukan banyak slot. Karena konten yang disuntikkan dipisahkan satu sama lain oleh elemen DOM yang berbeda (<div>, <p>, dll.), tidak mungkin untuk meneruskan semua informasi ini dalam satu slot.

Jika kita periksa DOM, kita dapat melihat bahwa templat yang menggunakan v-slot menyisipkan konten di tempat yang tepat.

Semua ini berarti jika kita ingin menggunakan slot di komponen ini, kita membutuhkan lebih dari satu slot.

Cara Menggunakan Slot Bernama

Ada dua langkah untuk menggunakan slot bernama di Vue:

• Memberi nama slot dari komponen anak menggunakan atribut name.
• Menyediakan konten ke slot bernama ini dari komponen induk menggunakan arahan v-slot.

Secara default, ketika kita tidak memberikan atribut name eksplisit pada slot, slot memiliki nama default.

Untuk memberi nama slot, elemen <slot> memiliki atribut name khusus yang memungkinkan kita membedakan beberapa slot.

Dalam contoh Article, kita dapat memberi nama ketiga slot seperti ini:

Article:

<template> <div> <slot name="title"> Judul Cadangan </slot> <slot name="content"> Konten Cadangan </slot> <slot name="comments"> Komentar Cadangan </slot> </div></template>

Kemudian, di komponen induk, kita dapat menentukan slot mana yang akan diisi konten menggunakan arahan v-slot pada elemen <template>.

Jadi, di manapun kita mendeklarasikan komponen dengan slot bernama, kita dapat membuat tiga elemen <template>, satu untuk setiap slot.

Parent:

<template> <div> <child-component> <template> Judul Kami </template> <template> Konten Kami </template> <template> Komentar Kami </template> </child-component> </div></template>

Jika kita simpan dan lihat, Anda akan melihat bahwa konten cadangan masih muncul.

Itu karena templat kita saat ini tidak menargetkan slot yang sudah ditentukan!

Untuk memperbaikinya, gunakan arahan v-slot dengan meneruskan nama setiap slot seperti ini, pastikan nama sesuai persis dengan yang dideklarasikan di komponen anak.

Parent:

<template> <div> <child-component> <template v-slot:title> Judul Kami </template> <template v-slot:content> Konten Kami </template> <template v-slot:comments> Komentar Kami </template> </child-component> </div></template>

Sekarang, kita akan melihat konten kita disuntikkan ke setiap slot.

Dan sebenarnya itu saja! Saya tahu, sangat mudah menggunakan slot bernama dalam kode Anda.

Slot Scoped

Mari kita lihat contoh lain: misalkan kita memiliki komponen ArticleHeader yang berisi informasi artikel dalam data komponennya.

ArticleHeader:

<template> <div> <slot v-bind:info="info"> {{ info }} </slot> </div></template><script> export default { data() { return { info: { title: 'judul', description: 'deskripsi', }, } }, }</script>

Jika kita perhatikan lebih dekat pada slot, kita akan melihat bahwa konten cadangan me-render info dari artikel.

Tanpa mengubah konten cadangan default, kita dapat dengan mudah mengimplementasikan komponen ini seperti ini:

ParentComponent:

<template> <div> <article-header /> </div></template>

Jika kita lihat di browser, aplikasi akan menampilkan judul.

Meskipun kita dapat dengan mudah mengubah konten slot dengan menambahkan ekspresi templat ke dalam slot, apa yang terjadi jika kita ingin me-render infoption dari komponen anak?

Tampaknya yang perlu dilakukan hanyalah menambahkannya ke dalam slot:

ParentComponent:

<template> <div> <article-header> {{ infoption }} </article-header> </div></template>

Tapi jika kita jalankan, kita mendapatkan error: TypeError: Cannot read property 'description' of undefined.

Itu karena komponen induk tidak tahu apa-apa tentang objek info ini.

Jadi bagaimana cara mengatasinya?

Menggunakan Vue Slot Scoped

Secara sederhana, slot scoped memungkinkan konten slot di komponen induk memiliki akses ke data yang hanya ada di komponen anak. Misalnya, kita dapat menggunakan slot scoped untuk memberikan akses ke info kepada komponen induk.

Ada dua langkah untuk melakukannya:

• Membuat info tersedia untuk konten slot menggunakan v-bind.
• Menggunakan v-slot di lingkup induk untuk mengakses slot props.

Pertama, untuk membuat info tersedia bagi induk, kita dapat mengikat objek info sebagai atribut pada slot. Atribut terikat ini disebut slot props.

Kode untuk itu semudah ini:

ArticleHeader:

<template> <div> <slot v-bind:info="info"> {{ info }} </slot> </div></template>

Kemudian, di komponen induk, kita dapat mengakses semua slot props menggunakan <template> bersama dengan arahan v-slot.

ParentComponent:

<template> <div> <child-component> <template v-slot="article"> </template> </child-component> </div></template>

Sekarang, semua slot props — dalam contoh ini hanya info — akan tersedia sebagai properti pada objek article, dan kita dapat dengan mudah mengubah slot untuk menampilkan deskripsi.

ParentComponent:

<template> <div> <child-component> <template v-slot="article"> {{ infoption }} </template> </child-component> </div></template>

Hasil akhirnya akan terlihat seperti ini.

Dapat Digunakan Kembali dengan Slot

Props adalah cara yang bagus untuk menggunakan kembali komponen, tetapi memiliki keterbatasan tergantung pada kasus penggunaan. Props cenderung bekerja paling baik pada komponen yang memiliki format dan konten yang sama, hanya nilai yang berbeda.

Terkadang Anda perlu membuat komponen sedikit lebih fleksibel dan adaptif: mungkin Anda ingin beberapa komponen memiliki bagian tertentu sementara tergantung pada halaman, Anda ingin menghapus bagian lain.

Dengan menyuntikkan konten menggunakan slot, lebih mudah untuk menukar konten komponen tanpa harus khawatir menggunakan logika templat seperti v-if dan v-else untuk menangani rendering.

Kesimpulan

Meskipun slot Vue adalah konsep yang cukup sederhana, namun sangat kuat dalam merancang komponen yang menakjubkan.

Saya harap artikel ini membantu Anda mendapatkan pemahaman dasar tentang cara kerja slot Vue.