Here is the article in Indonesian with a length of over 1000 words:

Menggunakan Slot dalam Vue.js

Dalam pengembangan aplikasi dengan framework Vue.js, kita seringkali memerlukan fitur untuk membuat komponen yang dapat di-reuse dan dapat dipadankan dengan cara yang berbeda. Salah satu fitur tersebut adalah menggunakan slot.

Menggunakan Template Explicit untuk Slot Default

Ketika kita ingin membuat komponen yang memiliki slot default, maka kita perlu menggunakan template explicit untuk membuat jelas bahwa properti message tidak tersedia di dalam slot lainnya:

<MyComponent>
 <!-- Use explicit default slot -->
 <template #default="{ message }">
 <p>{{ message }}</p>
 </template>

 <template #footer>
 <p>Here's some contact info</p>
 </template>
</MyComponent>

Dengan menggunakan template explicit, kita dapat membuat jelas bahwa properti message hanya tersedia di dalam slot default.

Contoh Penggunaan Slot Scope

Kita juga dapat menggunakan slot scope untuk membuat komponen yang dapat di-reuse dan dapat dipadankan dengan cara yang berbeda. Contohnya, kita memiliki komponen yang dapat menampilkan daftar item – itu dapat mengandung logika untuk memuat data remote, menggunakan data untuk menampilkan daftar, atau bahkan fitur-fitur lanjut seperti pagination atau infinite scrolling. Namun, kita ingin membuatnya fleksibel dan meninggalkan styling setiap item kepada komponen induk yang mengkonsumsi itu.

<FancyList :api-url="url" :per-page="10">
 <template #item="{ body, username, likes }">
 <div class="item">
 <p>{{ body }}</p>
 <p>by {{ username }} | {{ likes }} likes</p>
 </div>
 </template>
</FancyList>

Dalam contoh di atas, kita menggunakan slot scope untuk menampilkan setiap item dengan data yang berbeda. Kita juga dapat mengakses properti-properti slot dengan menggunakan v-bind.

Komponen Tanpa Render

Konsep lainnya dalam penggunaan slot scope adalah membuat komponen tanpa render. Komponen seperti itu hanya mengandung logika dan tidak menampilkan apa-apa, sementara output visual sepenuhnya dipadankan oleh komponen induk dengan menggunakan slot scope.

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

Komponen tanpa render seperti itu dapat digunakan untuk menangkap logika yang tidak berhubungan dengan output visual. Namun, sebagian besar fungsi yang dapat dicapai dengan komponen tanpa render dapat dicapai dengan menggunakan API Komposisi Vue.js, tanpa mengandung overhead komponen nesting.

Bisa Saya Menggunakan Slot dalam Loop Vue.js?

Jika kita memiliki template yang melakukan looping dengan v-for dan memiliki slot yang dinamis, maka kita tidak melihat konten apa pun. Apa yang salah?

Contoh di atas menggunakan slot scope untuk membuat komponen yang dapat menampilkan tab berbeda. Namun, dalam contoh ini, kita tidak melihat konten apa pun. Hal ini karena kita tidak memasukkan isi slot ke dalam template loop.

Solusi

Untuk membuat konten slot muncul di dalam template loop, kita perlu menggunakan v-slot untuk mengakses properti-properti slot dan kemudian memasukkan isi slot ke dalam template loop.

<todo-tabs :list="items">
 <div v-for="item in list" :key="item.id" v-slot="slotProps">
 <slot name="@{{ item.id }}" v-bind="slotProps"></slot>
 </div>
</todo-tabs>

Dengan menggunakan v-slot, kita dapat mengakses properti-properti slot dan kemudian memasukkan isi slot ke dalam template loop. Kita juga perlu menambahkan :key untuk memberikan id unik setiap item di dalam loop.

Kesimpulan

Dalam artikel ini, kita telah membahas penggunaan slot scope dalam Vue.js dan beberapa contoh penggunaannya. Dengan menggunakan slot scope, kita dapat membuat komponen yang dapat di-reuse dan dapat dipadankan dengan cara yang berbeda. Kita juga telah menemukan solusi untuk menggunakan slot dalam loop Vue.js.