Vue Scoped Slots - Apa Itu dan Bagaimana Cara Menggunakannya?

Masalah

Saya telah banyak membaca tentang scoped slots akhir-akhir ini, tetapi belum bisa memahami kapan harus menggunakannya dan bagaimana mengimplementasikannya. Saya membaca dokumentasi, merasa paham, lalu saat benar-benar mencoba menerapkannya... "Sial! Saya tidak mengerti!" Semoga ini membantu memperjelas beberapa hal untuk Anda.

Intinya

Scoped slots digunakan saat Anda perlu mengakses props di komponen yang sedang dirender untuk melakukan modifikasi template berdasarkan struktur komponen yang ada.

Ikhtisar Singkat Slot

Slot pada dasarnya adalah placeholder tempat Anda dapat menempatkan berbagai bagian konten DOM dengan default dan nama untuk memperjelas "slot" mana yang Anda maksud.

// MyComponent<template> <a href="whatever"> <slot>My Default Link Text</slot> </a></template>// AnotherComponent<MyComponent> My New Content</MyComponent>

Karena slot default, ini akan merender tag tautan dengan konten My New Content.

Slot Terlingkup (Scoped Slots)

Baik, saya sudah membaca banyak artikel tentang scoped slots dan sering kali merasa bingung. Mungkin saya bukan pembaca yang baik; seorang guru pernah bilang begitu.

Mengapa?

Saya pikir penting untuk bertanya pada diri sendiri beberapa pertanyaan dasar saat menggunakan pola baru. Mengapa saya menggunakan ini dan masalah apa yang seharusnya dipecahkan? Dalam pengalaman pribadi saya, ini cukup membantu. Kadang hanya pola keren yang belum layak digunakan di aplikasi Anda karena tidak menyelesaikan masalah spesifik atau mengarahkan pada tujuan tertentu. Jadi... kembali ke scoped slots dan alasan penggunaannya. Dari riset dan eksperimen saya, scoped slots digunakan ketika saya ingin memodifikasi template berdasarkan props di komponen yang dirender. Mari kita uraikan.

Bagaimana

// MyComponent<script>export default { props: { name: { type: String, default: 'My Default Name', },};<template> <slot :name="name"> <span>{{ name }}</span> </slot></template>// AnotherComponent<template> <MyComponent /></template>

Kita tahu bahwa AnotherComponent saat digunakan akan merender elemen span dengan My Default Name di DOM. Ada beberapa hal yang perlu dicatat sebelum melanjutkan. Di MyComponent, jika kita tahu akan menggunakan scoped slot saat merender, kita perlu menambahkan prop ke slot, dalam hal ini <slot :name="name">. Jika tidak menggunakan scoped slot, ini tidak diperlukan! Catatan: Jika kita tidak akan menggunakan name saat merender MyComponent, kita tidak akan menambahkan prop ke slot.

Di Mana Scoped Slots Digunakan

Ikuti terus, kita hampir sampai. Sampai saat ini, kita memiliki MyComponent yang dirender di dalam AnotherComponent, tetapi persyaratan berubah! Desainer berlari ke meja Anda dan berkata, "Kita perlu tombol batal di samping nama!" Kita bisa mengatasinya, mari gunakan pola scoped slot yang baru kita pelajari!

// AnotherComponent<template> <MyComponent> <template v-slot="{ name }"> <button>Cancel</button> <span>{{ name }}</span> </template> </MyComponent></template>

Anda mungkin berpikir, "Scott! Kenapa kita tidak mengedit MyComponent saja?" Itu pertanyaan bagus. MyComponent mungkin digunakan di bagian lain aplikasi dan akan menambah terlalu banyak logika ke komponen. Jadi apa yang terjadi di sini?

• Kita merender template untuk menggantikan slot default, dengan direktif v-slot untuk mendestruktur props yang berasal dari MyComponent.
• Kita merender nama dengan tombol batal. Karena kita tidak bisa mengakses nama di AnotherComponent, scoped slot memungkinkan kita mengambil name dari MyComponent.

Cukup jelas, kan? Tidak percaya? Saya juga tidak akan percaya... berikut tautan ke sandbox untuk Anda coba.

Kesimpulan

Jadi kita telah mempelajari aspek dasar dan utama tentang apa itu scoped slots dan kapan menggunakannya. Beberapa hal penting yang perlu diingat:

• Saat menggunakan scoped slots, Anda akan mengakses data reaktif dari komponen yang Anda render, pastikan data tersebut ada di state lokal atau props.
• Pastikan saat menggunakan scoped slots Anda meneruskan props ke slot sehingga Anda memiliki akses ke nilai-nilai tersebut.

Jika ada pertanyaan atau ingin saya bahas topik tambahan, silakan berkomentar di bawah! Terima kasih telah membaca!