Pada dasarnya, slot adalah fitur penting pada Vue yang memungkinkan kita untuk menambahkan konten yang ditentukan oleh parent component ke dalam child component. Namun, slot juga dapat digunakan untuk penggunaan yang lebih spesifik melalui sintaks v-slot.

Penggunaan v-slot

Sintaks v-slot memungkinkan kita untuk menentukan fungsi slot yang akan dipanggil pada child component. Fungsi ini dapat menerima properti sebagai argumen, sehingga kita dapat mengirimkan data ke dalam child component melalui slot.

Contohnya, berikut adalah contoh penggunaan v-slot:

function MyComponent(slots) {
 const greetingMessage = 'hello'
 return `<div>${
 // call the slot function with props!
 slots.default({ text: greetingMessage, count: 1 })
 }</div>`
}

<MyComponent v-slot="{ text, count }">
 {{ text }} {{ count }}
</MyComponent>

Dalam contoh di atas, kita menggunakan v-slot untuk menentukan fungsi slot yang akan dipanggil pada child component. Fungsi ini menerima properti text dan count sebagai argumen.

Slot dengan Nama

Selain penggunaan default, Vue juga memungkinkan kita untuk menggunakan slot dengan nama. Namun, kita harus menggunakan sintaks v-slot:name="slotProps" untuk mengirimkan properti ke dalam child component melalui slot.

Contohnya, berikut adalah contoh penggunaan slot dengan nama:

<template>
 <MyComponent>
 <template #header="headerProps">
 {{ headerProps }}
 </template>

 <template #default="defaultProps">
 {{ defaultProps }}
 </template>

 <template #footer="footerProps">
 {{ footerProps }}
 </template>
 </MyComponent>
</template>

Dalam contoh di atas, kita menggunakan v-slot untuk menentukan fungsi slot yang akan dipanggil pada child component. Fungsi ini menerima properti headerProps, defaultProps, dan footerProps sebagai argumen.

Mengirimkan Properti ke dalam Slot

Untuk mengirimkan properti ke dalam slot, kita dapat menggunakan sintaks v-slot:name="slotProps" dan menentukan fungsi slot yang akan dipanggil pada child component. Contohnya:

<slot name="header" message="hello"></slot>

Dalam contoh di atas, kita mengirimkan properti message ke dalam slot dengan nama header.

Penggunaan Slot pada Component Reusable

Slot juga dapat digunakan pada component reusable untuk menampilkan konten yang ditentukan oleh parent component. Contohnya, berikut adalah contoh penggunaan slot pada component reusable:

<!-- <FancyList> template -->
<div>
 <slot :message="hello"></slot>
 <slot name="footer" />
</div>

<!-- This template won't compile -->
<MyComponent v-slot="{ message }">
 <p>{{ message }}</p>
 <template #footer>
 <!-- message belongs to the default slot, and is not available here -->
 <p>{{ message }}</p>
 </template>
</MyComponent>

Dalam contoh di atas, kita menggunakan v-slot untuk menentukan fungsi slot yang akan dipanggil pada child component. Fungsi ini menerima properti message sebagai argumen.

Contoh Penggunaan Slot pada Component Reusable

Contohnya, berikut adalah contoh penggunaan slot pada component reusable:

<!-- <FancyList> template -->
<ul>
 <li v-for="item in items">
 <slot name="item" v-bind="item"></slot>
 </li>
</ul>

Dalam contoh di atas, kita menggunakan v-slot untuk menentukan fungsi slot yang akan dipanggil pada child component. Fungsi ini menerima properti item sebagai argumen.

Renderless Components

Penggunaan slot juga dapat digunakan untuk membuat komponen renderless yang hanya mengandung logika dan tidak menampilkan apa pun kecuali melalui penggunaan slot. Contohnya:

<!-- <MouseTracker> template -->
<MouseTracker v-slot="{ x, y }">
 Mouse is at: {{ x }}, {{ y }}
</MouseTracker>

Dalam contoh di atas, kita menggunakan v-slot untuk menentukan fungsi slot yang akan dipanggil pada child component. Fungsi ini menerima properti x dan y sebagai argumen.

Itulah artikel tentang penggunaan slot pada Vue, termasuk penggunaan v-slot, slot dengan nama, mengirimkan properti ke dalam slot, dan penggunaan slot pada component reusable. Dengan menggunakan slot, kita dapat membuat aplikasi yang lebih dinamis dan fleksibel.