Kekuatan Scoped Slots di Vue

Memulai

Slot berskop membuka cara baru dalam menggunakan komponen Vue secara dinamis. Ini berguna ketika Anda membutuhkan markup yang fleksibel dalam template, dan juga Anda membutuhkan akses ke beberapa data dari komponen Anda.

Komponen Contoh

Kompleksitas komponen tidak masalah, Anda dapat menggunakan slot berskop kapan pun Anda perlu.

<template> <div> <h1>The Item:</h1> <slot v-bind="item">{{ item }}</slot> </div></template><script> export default { data() { return { item: { name: 'Item', price: 900 } }; } } </script>

Sekarang seperti yang Anda lihat, kita bisa mengikat item ke slot. Itu berarti dengan sedikit trik, kita dapat menggunakan data dari slot kita. Juga, kita dapat menentukan konten default dari slot kita seperti slot dasar.

<component> <template slot-scope="product"> <strong>{{ product }}</strong> </template></component>

Sejak Vue 2.5.0+, slot berskop tidak lagi terbatas pada <template>. Ini dapat digunakan pada elemen atau komponen mana pun.

Dalam dokumentasi, Anda dapat melihat berbagai cara dan tipe data binding. Juga, hal besar lainnya yang membawa fleksibilitas ke tingkat yang lebih tinggi adalah kita dapat menggunakan slot berskop dalam perulangan. Anda dapat dengan mudah menyesuaikan item perulangan Anda.

Rangkuman

Slot berskop membawa fleksibilitas baru ke framework. Kami sarankan untuk menggali lebih dalam untuk memahami cara kerja fitur ini sepenuhnya dan mengenali kemungkinan yang ditawarkannya.