Apa itu slots dan scoped slots?

Question

Accepted Answer

**Slots** memungkinkan parent melewatkan **konten template** ke dalam komponen child — inilah cara Anda membangun wrapper yang fleksibel dan dapat digunakan kembali (kartu, modal, tata letak) di mana konsumen mengontrol markup internal. ## Slot dasar ```vue ``` ```vue

Title

Any content!

``` Child mendefinisikan "lubang" (``); parent mengisinya dengan markup apa pun yang diinginkan. Ini jauh lebih fleksibel daripada melewatkan string melalui props. ## Slot bernama — beberapa titik penyisipan ```vue ``` ```vue

Main content (default slot)

``` ## Scoped slots — child melewatkan data KE ATAS ke konten slot Kadang-kadang child memiliki data yang dibutuhkan slot parent (misalnya setiap item dalam daftar). **Scoped slots** mengekspos data dari child ke template parent: ```vue ``` ```vue ``` Scoped slots adalah kunci untuk **komponen renderless/headless**: child menangani logika (looping, fetching, state) dan membiarkan parent sepenuhnya mengendalikan presentasi. ## Mengapa ini penting Slots adalah mekanisme distribusi konten Vue — penting untuk komponen tata letak dan wrapper yang dapat digunakan kembali. Slot bernama menyediakan beberapa titik penyisipan, dan scoped slots (mengekspos data child ke template yang ditentukan parent) memungkinkan pola yang kuat seperti komponen headless dan daftar/tabel yang dapat disesuaikan. Mereka adalah apa yang membuat komponen Vue compositional bukan kaku.