vue slots

Mekanisme slot pada komponen Vue terinspirasi dari elemen slot Web Component yang asli, tetapi dengan kemampuan tambahan yang akan kita lihat nanti. Kompilasi Kapsul Konten memiliki akses ke data kapsul komponen induk, karena didefinisikan di induk. Vue.js menawarkan slot sebagai alat yang kuat untuk membantu Anda membuat komponen yang dapat digunakan kembali dengan mudah. Dalam tutorial ini, kita akan membahas slot Vue dan bagaimana menggunakannya untuk membuat komponen yang dapat digunakan kembali dan fleksibel. Kami akan membahas topik-topik berikut, beserta contoh praktis cara menerapkan slot Vue dalam aplikasi Anda: Apa itu slot di Vue.js? Direktif v-slot diperkenalkan dalam Vue 2.6.0, menawarkan API alternatif yang lebih baik untuk atribut slot dan slot-scope yang masih didukung. Alasan lengkap untuk memperkenalkan v-slot dijelaskan dalam RFC ini. Tutorial ini diverifikasi dengan Node v15.10.0, npm v7.6.0, dan vue v2.6.11. Menggunakan Slot. Untuk mengizinkan komponen induk untuk melewatkan elemen DOM ke komponen anak, berikan elemen slot di dalam komponen anak. Berikut adalah contoh dari ChildComponent yang berisi slot: Komplikasi Kapsul. Ketika Anda ingin menggunakan data di dalam slot, seperti ini: navigation-link url = "/profile" Masuk sebagai {{user.name}} /navigation-link Slot dapat mengakses instance properti yang sama (lingkup yang sama). Slot tidak dapat mengakses lingkup navigation-link. Kapsul Konten. Vue menerapkan API distribusi konten yang terinspirasi oleh draf spesifikasi Komponen Web, menggunakan elemen slot untuk berfungsi sebagai outlet distribusi konten. Kemudian dalam templat untuk navigation-link, mungkin Anda memiliki: Ketika komponen dirender, slot/slot akan digantikan oleh "Profil Anda". Slot dapat berisi template apa pun dan ini mengarah pada ketergantungan slot yang dilacak oleh anak daripada induk, yang menghasilkan pembaruan yang lebih akurat dan efisien. Scoped Slots Untuk merender slot berlingkup pada komponen induk, slot diteruskan ke anak. Perhatikan bagaimana slot sekarang memiliki parameter teks. Slot akan dipanggil dalam komponen anak dan data dari ... Vue juga bermain secara baik dengan Komponen Web asli. Jika Anda penasaran tentang hubungan antara Komponen Vue dan Komponen Web asli, baca lebih lanjut di sini. Mendefinisikan Komponen Ketika menggunakan langkah pembuatan, kita biasanya menentukan setiap komponen Vue dalam satu file yang didedikasikan menggunakan ekstensi .vue - dikenal sebagai Komponen File Tunggal (SFC singkatnya): 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 cara menggunakan slot dan beberapa contoh bagaimana mereka dapat digunakan dalam aplikasi Vue Anda. Dengan rilis terbaru Vue 2.6, sintaks penggunaan slot telah dibuat lebih ringkas. Kami mengakses slot menggunakan template v-slot: preview. Kami juga bisa menggunakan bentuk pendeknya seperti template #preview. Ini hanya mungkin dengan slot bernama, yang merupakan tambahan baru untuk Vue 2.6 dan lebih tinggi. Slot berlingkup. Sementara properti dibuat untuk aliran data satu arah, dengan slot berlingkup kita juga dapat mengirimkan data dari anak ke induk. Vue memungkinkan kita untuk memiliki beberapa slot dalam satu komponen. Namun, untuk memastikan bahwa konten yang kami berikan di induk tidak mengganti slot yang salah di anak, Vue mengharuskan kami untuk menamai setiap elemen slot. Untuk memberi nama slot, kita menambahkan atribut nama ke elemen slot dan menentukan nama unik sebagai nilai. Dengan slot Vue, Anda dapat mengubah bagian atau seluruh komponen Anda menjadi templat yang dapat digunakan kembali yang akan dirender dengan berbeda berdasarkan kasus penggunaan yang berbeda. Yang perlu Anda lakukan hanyalah menyematkannya di dalam slot. Dalam artikel ini, saya akan membantu Anda memahami konsep slot Vue dan menunjukkan cara menggunakannya. Penggunaan dasar slot.