named slot vue

Untuk melewati slot bernama, kita perlu menggunakan elemen template dengan direktif v-slot, dan kemudian melewati nama slot sebagai argumen ke v-slot: template BaseLayout template v-slot:header /template /template BaseLayout Pada 2.6.0, diperkenalkan sintaks terpadu baru (direktif v-slot) untuk slot bernama dan scoped. Ini menggantikan atribut slot dan slot-scope, yang kini sudah usang, tetapi belum dihapus dan masih didokumentasikan di sini. Alasan pengenalan sintaks baru dijelaskan dalam RFC ini. Bekerja dengan slot bernama dan ganda. Terkadang, Anda mungkin ingin memiliki beberapa slot dalam satu komponen. Untuk melakukannya, Anda dapat menggunakan slot bernama. Slot bernama memungkinkan Anda menentukan nama untuk slot, kemudian gunakan nama itu dalam komponen induk untuk menunjukkan ke dalam slot mana konten harus dimasukkan. 1 - slot juga dapat tanpa nama. Slot default (slot/) sebenarnya adalah kasus khusus dari slot bernama: di bawah kap mesin, mereka dinamai default, dan juga, secara implisit, mereka mendapatkan semua konten yang Anda masukkan ke dalam tag komponen anak, di komponen induk. Outlet slot tanpa nama secara implisit memiliki nama "default". Untuk menyediakan konten ke slot bernama, kita perlu menggunakan direktif v-slot pada elemen template, memberikan nama slot sebagai argumen v-slot: Cara Menggunakan Slot Bernama. Ada dua langkah untuk menggunakan slot bernama dalam Vue: Menamai slot dari komponen anak kita menggunakan atribut nama; Menyediakan konten ke slot bernama ini dari komponen induk menggunakan direktif v-slot; Secara default, ketika kita tidak memberikan atribut nama yang jelas pada slot kami, seperti dalam contoh di atas, ia memiliki ... Pelajari cara merender slot secara kondisional di Vue.js berdasarkan kontennya, dan lihat bagaimana developer lain memecahkan masalah serupa dengan slot dan gaya di Stack Overflow. Ada dua langkah untuk menggunakan slot bernama dalam Vue: Menamai slot dari komponen anak kita dengan menggunakan atribut nama. Menyediakan konten ke slot bernama ini dari komponen induk kita menggunakan v ... Kami memerlukan direktif v-slot untuk merujuk ke slot bernama. Slot bernama memungkinkan lebih banyak kontrol atas tempat konten ditempatkan dalam template komponen anak. Slot bernama dapat digunakan untuk membuat komponen lebih fleksibel dan dapat digunakan kembali. Bagi saya, yang benar-benar terungkap adalah menambahkan nama slot dinamis. Seperti yang disebutkan @Ezequiel Fernandez di atas, Anda dapat mencapainya dengan: template v-slot: [slotName] = "slotProps" !-- Vue.js - slot bernama. 3. Vue: pembungkus slot mengabaikan slot yang sudah ditentukan. 3. Vue: Akses metode komponen Vue di dalam slot bernama yang dihasilkan. 1. Saya slot dinamis... Menggunakan Slot di Vue.js. Slot adalah alat yang kuat untuk membuat komponen yang dapat digunakan kembali di Vue.js, meskipun bukan fitur yang paling mudah dipahami. Mari kita lihat bagaimana menggunakan slot dan beberapa contoh bagaimana mereka dapat digunakan dalam aplikasi Vue Anda. Dengan rilis terbaru Vue 2.6, sintaks untuk menggunakan slot telah dibuat lebih ringkas.