Memahami Slot di Vue: Jenis, Manfaat, Kasus Penggunaan

Vue menyediakan slot sebagai alat yang kuat untuk membantu Anda membuat komponen yang dapat digunakan kembali dengan mudah. Dalam tutorial ini, kita akan membahas slot Vue dan cara menggunakannya untuk membuat komponen yang dapat digunakan kembali dan fleksibel.

Kami akan membahas topik-topik berikut beserta contoh praktis penerapan slot Vue dalam aplikasi Anda:

• Apa itu slot di Vue?
• Menentukan konten fallback untuk slot Vue
• Bekerja dengan beberapa slot dan slot bernama
• Menggunakan nama slot dinamis di Vue
• Menggunakan scoped slot di Vue
• Mencapai reusableitas dalam aplikasi Vue dengan slot
• Menggunakan slot dalam komponen tanpa render

Apa itu slot di Vue?

Di Vue, slot adalah cara untuk melewatkan konten ke suatu komponen. Mereka memungkinkan Anda mendefinisikan bagian dari template komponen yang dapat digantikan oleh komponen induk. Ini memungkinkan komponen induk mengontrol tata letak dan konten komponen anak.

Masalah apa yang dipecahkan oleh slot Vue?

Slot Vue memungkinkan komponen menerima konten dinamis — yang dikenal sebagai konten slot — dan merendernya di lokasi tertentu dalam template komponen — yang dikenal sebagai outlet slot. Lokasi ini ditentukan dengan elemen <slot>. Elemen <slot> bertindak sebagai tempat penampung untuk konten slot yang disediakan oleh induk. Ini memecahkan masalah template tetap dalam suatu komponen, memungkinkan pengguna menambahkan konten kustom ke tata letak komponen Vue dan membuatnya lebih fleksibel dan dapat digunakan kembali.

Berikut contoh cara kerja slot. Perhatikan komentar kode untuk melihat di mana konten slot dan outlet slot berada.

Pertimbangkan komponen <CustomButton> yang menerima konten seperti ini:

<CustomButton> Halo semuanya! <!-- konten slot --></CustomButton>

Template komponen <CustomButton> bisa terlihat seperti ini:

<button class="custom-btn"> <slot></slot> <!-- outlet slot --></button>

DOM akhir yang dirender akan terlihat seperti ini:

<button class="custom-btn">Halo semuanya!</button>

Seperti terlihat pada kode di atas, konten apa pun yang disediakan di komponen induk <CustomButton> akan dilewatkan ke tag slot komponen anak. Komponen <CustomButton> menyediakan tombol di sekitar konten dan penataan kustom tombol tersebut.

Seperti disebutkan sebelumnya, slot tidak terbatas pada teks — mereka juga dapat menyertakan beberapa elemen dan komponen lain. Contoh:

<CustomButton> <span style="color:blue">Tambah</span> <AwesomeIcon name="plus" /></CustomButton>

Berikut contoh lain dari komponen sederhana yang menggunakan slot:

<!-- MyComponent --><template> <div> <h1>Komponen Saya</h1> <slot></slot> </div></template>

Dalam contoh ini, kita memiliki komponen sederhana bernama MyComponent yang menampilkan judul dan elemen <slot>. Elemen <slot> adalah tempat komponen induk dapat menyisipkan konten. Berikut contoh bagaimana komponen induk dapat menggunakan komponen anak:

<!-- ParentComponent --><template> <div> <my-component> <p>Ini adalah konten yang akan disisipkan ke dalam slot komponen anak.</p> </my-component> </div></template>

Dalam contoh ini, elemen <p> akan disisipkan ke elemen <slot> komponen anak, menghasilkan output berikut:

Komponen Saya Ini adalah konten yang akan disisipkan ke dalam slot komponen anak.

Kode lengkapnya akan terlihat seperti ini:

<!-- MyComponent --><template> <div> <h1>Komponen Saya</h1> <slot></slot> </div></template><script>export default { name: 'MyComponent'}</script>

<!-- ParentComponent --><template> <div> <my-component> <p>Ini adalah konten yang akan disisipkan ke dalam slot komponen anak.</p> </my-component> </div></template><script>import MyComponent from './MyComponent';export default { name: 'ParentComponent', components: { 'my-component': MyComponent }}</script>

Menentukan konten fallback untuk slot Vue

Konten fallback mengacu pada konten yang ditampilkan dalam slot jika tidak ada konten yang disediakan untuk slot tersebut. Di Vue, konten fallback slot ditentukan menggunakan konten default di dalam tag <slot>.

Contoh:

<!-- Komponen Induk --><template> <div> <header> <slot name="header">Header Default</slot> </header> <main> <slot>Konten Utama Default</slot> </main> <footer> <slot name="footer">Footer Default</slot> </footer> </div></template>

<!-- Komponen Anak --><template> <layout> <!-- Tidak ada konten header yang disediakan --> <p>Konten Utama</p> <!-- Tidak ada konten footer yang disediakan --> </layout></template>

Dalam contoh di atas, komponen induk telah mendefinisikan konten fallback untuk setiap slot. Jika komponen anak tidak menyediakan konten untuk slot header atau footer, konten fallback akan ditampilkan.

Bekerja dengan beberapa slot dan slot bernama

Kadang-kadang Anda mungkin ingin memiliki beberapa slot dalam satu komponen. Untuk melakukannya, Anda dapat menggunakan slot bernama. Slot bernama memungkinkan Anda menentukan nama untuk suatu slot, lalu menggunakan nama tersebut di komponen induk untuk menunjukkan slot mana yang akan disisipi konten.

Berikut contoh komponen yang menggunakan beberapa slot bernama:

<template> <div> <h1>Komponen Saya</h1> <slot name="header"></slot> <slot name="body"></slot> <slot name="footer"></slot> </div></template>

Dalam contoh ini, komponen anak memiliki tiga slot bernama: header, body, dan footer. Komponen induk kemudian dapat menggunakan nama-nama ini untuk menunjukkan slot mana yang akan disisipi konten, seperti ini:

<template> <div> <my-component> <template v-slot:header> <p>Ini konten header</p> </template> <template v-slot:body> <p>Ini konten body</p> </template> <template v-slot:footer> <p>Ini konten footer</p> </template> </my-component> </div></template>

Outputnya akan menampilkan ketiga bagian konten.

Menggunakan nama slot dinamis di Vue

Vue memungkinkan Anda melewatkan nilai dinamis sebagai nama slot. Ini berguna ketika Anda ingin secara dinamis memutuskan konten slot mana yang akan dirender berdasarkan suatu kondisi.

Untuk menerapkan nama slot dinamis di Vue, Anda dapat menggunakan sintaks kurung siku untuk mengikat nama slot ke nilai dinamis.

Contoh:

<template> <div> <h1>Komponen Saya</h1> <slot :name="currentSlot"></slot> </div></template><script>export default { data() { return { currentSlot: 'header' } }}</script>

<template> <div> <my-component> <template v-slot:[currentSlot]> <p>Ini konten {{ currentSlot }}</p> </template> </my-component> </div></template>

Hasilnya akan menampilkan "Ini konten header" jika properti data currentSlot diatur ke header. Jika diubah ke nilai lain seperti body atau footer, konten slot akan berubah sesuai.

Mari kita lihat contoh yang lebih kompleks. Misalkan Anda memiliki komponen reusable seperti kartu yang perlu menampilkan konten berbeda berdasarkan konteks. Anda dapat menggunakan nama slot dinamis sebagai pengganti slot default:

<template> <div class="card"> <div class="card-header">{{ title }}</div> <div class="card-body"> <slot :name="slotName"></slot> </div> </div></template><script>export default { props: { title: String, slotName: { type: String, default: 'default' } }}</script>

Sekarang, ketika menggunakan komponen Card, Anda dapat menetapkan nama slot secara dinamis berdasarkan jenis kartu:

<template> <Card title="Kartu dengan Gambar"> <template v-slot:[slotName]> <img src="gambar"/> </template> </Card>// Jika nilai 'slotName' di atas adalah 'image', kartu gambar digunakan.<Card title="Kartu dengan Daftar"> <template v-slot:list> <ul> <li>Item 1</li> <li>Item 2</li> </ul> </template> </Card></template>

Menggunakan scoped slot di Vue

Scoped slot menyediakan cara untuk melewatkan data dari komponen anak ke komponen induk. Daripada melewatkan konten ke komponen anak, scoped slot memungkinkan komponen anak melewatkan data kembali ke komponen induk, yang kemudian dapat menggunakan data tersebut untuk merender konten di slot.

Berikut contoh komponen anak yang menggunakan scoped slot:

<template> <div> <h1>Komponen Saya</h1> <slot :item="item"></slot> </div></template><script>export default { props: { item: Object }}</script>

Komponen induk kemudian dapat menggunakan data yang dilewatkan oleh komponen anak untuk merender konten di slot:

<template> <div> <my-component v-for="item in items" :key="item" :item="item"> <template v-slot="{ item }"> <p>{{ item }}</p> <p>{{ itemption }}</p> </template> </my-component> </div></template><script>export default { data() { return { items: [ { id: 1, name: 'Item 1', description: 'Ini item pertama' }, { id: 2, name: 'Item 2', description: 'Ini item kedua' }, { id: 3, name: 'Item 3', description: 'Ini item ketiga' } ] } }}</script>

Mencapai reusableitas dalam aplikasi Vue dengan slot

Salah satu manfaat utama menggunakan slot adalah memungkinkan Anda membuat komponen yang sangat reusable. Dengan menggunakan slot, komponen induk dapat mengontrol tata letak dan konten komponen anak. Ini memudahkan penggunaan ulang komponen anak di berbagai tempat tanpa harus mengubah kodenya.

Anda juga dapat menggunakan slot di Vue bersama dengan fungsi untuk membuat kode yang lebih fleksibel dan reusable. Dalam konteks ini, kita dapat menganggap slot sebagai tempat penampung untuk fungsi, di mana komponen induk menyediakan fungsi yang akan dieksekusi di komponen anak.

Di komponen anak, kita dapat mendefinisikan slot yang mengharapkan fungsi dilewatkan sebagai prop. Kemudian kita dapat menggunakan slot fungsi ini untuk mengeksekusi fungsi yang disediakan di dalam komponen anak.

Contoh:

<template> <div> <slot :myFunction="myFunction"></slot> </div></template><script>export default { props: { myFunction: Function }}</script>

Di komponen induk, kita dapat menggunakan direktif v-slot untuk melewatkan fungsi ke slot fungsi komponen anak:

<template> <div> <child-component> <template v-slot="{ myFunction }"> <button @click="myFunction()">Jalankan Fungsi</button> </template> </child-component> </div></template><script>import ChildComponent from './ChildComponent'export default { components: { ChildComponent }, data() { return { message: 'Halo, Dunia!' } }, methods: { myFunction() { alert(thise) } }}</script>

Menggunakan slot dalam komponen tanpa render

Komponen tanpa render (renderless components) adalah teknik yang kuat di Vue yang dapat membantu kita membuat logika reusable tanpa overhead membuat komponen UI yang lengkap. Komponen tanpa render pada dasarnya adalah komponen yang tidak merender markup HTML sendiri, tetapi menyediakan fungsionalitas yang dapat digunakan oleh komponen lain. Dengan menggunakan slot, komponen tanpa render dapat melewatkan data dan fungsionalitas ke komponen lain, yang kemudian dapat menggunakan data tersebut untuk merender konten.

Berikut contoh komponen tanpa render yang menyediakan slot untuk komponen induk merender daftar item:

<template> <slot :items="items"></slot></template><script>export default { data() { return { items: [] } }, methods: { addItem(item) { items(item) }, removeItem(item) { const index = itemsf(item) if (index !== -1) { items(index, 1) } } }}</script>

Contoh komponen induk yang menggunakan komponen tanpa render untuk merender daftar item:

<template> <div> <my-list> <template v-slot="{ items }"> <ul> <li v-for="item in items" :key="item">{{ item }}</li> </ul> </template> </my-list> </div></template><script>import MyList from './MyList'export default { components: { MyList }, mounted() { this.$listm('Item 1') this.$listm('Item 2') this.$listm('Item 3') this.$listItem('Item 2') }}</script>

Kesimpulan

Dalam tutorial ini, kami membahas dasar-dasar slot Vue dan bagaimana kita dapat menggunakannya untuk membuat komponen yang reusable dan fleksibel. Kami juga membahas cara menggunakan beberapa slot dan slot bernama, scoped slot, serta slot dalam komponen tanpa render. Dengan memahami kekuatan slot, Anda dapat membawa pengembangan Vue Anda ke level berikutnya dan membuat komponen yang sangat reusable dan fleksibel.