Tips Vue – Properti slot berskop dan cara mengetiknya

Tips Vue – Properti slot berskop dan cara mengetiknya

Slot berskop di Vue memungkinkan komponen induk mengakses properti dari komponen anak melalui slot. Berikut contoh dasar:

<MyComponent>
<template #custom>
<!-- tidak bisa mengakses variabel dari lingkup MyComponent di sini -->
</template>
</MyComponent>

Dalam cuplikan di atas, kita hanya memiliki akses ke lingkup komponen saat ini, bukan ke data di dalam <MyComponent>. Namun, Vue secara otomatis mengekspos objek khusus yang berisi semua properti yang diteruskan ke elemen <slot>.

Menyediakan slot di <MyComponent> seperti ini:

<slot name="custom" message="Hello" person="John Doe" />

Objek tersebut akan berisi { message: 'Hello', person: 'John Doe' }. Vue membungkus semuanya kecuali properti name karena itu adalah properti khusus untuk mengidentifikasi slot bernama. Objek ini dapat dirujuk dalam template seperti ini:

<MyComponent>
<template #custom="slotProps">
{{ slotPropse }}, {{ slotProps }}!
</template>
</MyComponent>

Untuk membuatnya lebih membingungkan, Anda mungkin menemukan destructuring objek bersamaan dengan slot berskop. Ini cukup umum di pustaka UI, misalnya untuk mengakses baris saat ini dalam tabel.

Contoh dengan destructuring:

<MyComponent>
<template #default="{ person }">
Orangnya adalah {{ person }}!
</template>
</MyComponent>

Mengetik properti slot berskop dengan TypeScript

Meskipun TypeScript memberikan keamanan tipe, properti slot berskop sering kali tidak memiliki tipe yang tepat (misalnya tipe any). Kita dapat membantu diri sendiri dengan mendefinisikan tipe kustom. Pertama, buat tipe untuk objek dengan properti row sesuai tipe data yang diberikan ke tabel:

type TableData = {
row: Invoice
}

Kemudian gunakan tipe tersebut untuk menganotasi properti slot:

<template #customer-data="{ row }: TableData">
{{ customerme }}
</template>

Alternatifnya, Anda bisa mengetik langsung pada bagian yang didestructure:

<template #customer-data="{ row }: { row: Invoice }">

Dengan cara ini, IDE dan TypeScript kembali mengetahui tipe data yang benar, sehingga pemeriksaan tipe dan penyelesaian kode berfungsi kembali.