Dalam pengembangan aplikasi Vue, kita seringkali memerlukan kemampuan untuk mengeksploitasi slot komponen dan membuatnya lebih fleksibel dan dapat diatur. Dalam artikel ini, kita akan membahas tentang scoped slots yang diperkenalkan dalam Vue 3.0.

Penggunaan Scoped Slots

Sebelum kita mulai, perlu diingat bahwa scoped slots adalah fitur baru dalam Vue 3.0. Mereka memungkinkan Anda untuk membuat slot komponen yang lebih fleksibel dan dapat diatur dengan memberikan props ke dalam slot.

Contoh pertama adalah menggunakan scoped slots dengan cara menginisialisasi sebuah properti greetingMessage dan kemudian meletakkan nilai tersebut sebagai properti ke dalam slot:

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

Dalam contoh di atas, kita menggunakan shorthand v-slot untuk memberikan properti ke dalam slot. Namun, Anda juga dapat menggunakan sintaks yang lebih lengkap dengan cara menginisialisasi sebuah variabel dan kemudian meletakkan nilai tersebut sebagai properti ke dalam slot:

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

Named Scoped Slots

Scoped slots juga dapat digunakan dengan nama yang lebih spesifik. Contohnya, Anda dapat membuat sebuah slot dengan nama header dan kemudian meletakkan properti ke dalam slot tersebut:

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

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

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

Dalam contoh di atas, Anda dapat meletakkan properti ke dalam slot header, default, dan footer. Properti yang diberikan akan berisi nilai yang sesuai dengan nama slot.

Passing Props to a Named Slot

Jika Anda ingin memberikan props ke dalam sebuah slot yang sudah memiliki nama, maka Anda dapat menggunakan sintaks v-slot:name:

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

Dalam contoh di atas, Anda memberikan props message dengan nilai "hello" ke dalam slot header.

Renderless Components

Akhirnya, scoped slots juga dapat digunakan untuk membuat komponen yang tidak meng-render apa-apa sendiri, namun hanya mengeksploitasi logic dan membiarkan konsumennya untuk mengatur visual output. Contohnya, Anda dapat membuat sebuah komponen MouseTracker yang hanya meng-track posisi mouse dan membiarkan konsumennya untuk mengatur visual output:

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

Dalam contoh di atas, Anda dapat meletakkan properti x dan y ke dalam slot MouseTracker dan kemudian menggunakan sintaks Vue untuk menampilkan nilai-nilai tersebut.

Dengan demikian, scoped slots adalah fitur baru dalam Vue 3.0 yang memungkinkan Anda untuk membuat komponen lebih fleksibel dan dapat diatur dengan memberikan props ke dalam slot. Dalam artikel ini, kita telah membahas tentang penggunaan scoped slots dan beberapa contoh penggunaannya.