Vue Router
Slot RouterView
Komponen RouterView mengekspos slot yang dapat digunakan untuk merender komponen rute:
<router-view v-slot="{ Component }">
<component :is="Component" />
</router-view>Kode di atas setara dengan menggunakan <router-view /> tanpa slot, namun slot memberikan fleksibilitas ekstra saat kita ingin bekerja dengan fitur lainnya.
KeepAlive dan Transisi
Saat bekerja dengan komponen KeepAlive, kita biasanya ingin komponen tersebut menjaga komponen rute tetap hidup, bukan RouterView itu sendiri. Kita dapat mencapai hal itu dengan menempatkan KeepAlive di dalam slot:
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>Demikian pula, slot memungkinkan kita menggunakan komponen Transisi untuk bertransisi antar komponen rute:
<router-view v-slot="{ Component }">
<transition>
<component :is="Component" />
</transition>
</router-view>Kita juga dapat menggunakan KeepAlive di dalam Transisi:
<router-view v-slot="{ Component }">
<transition>
<keep-alive>
<component :is="Component" />
</keep-alive>
</transition>
</router-view>Untuk informasi lebih lanjut tentang penggunaan RouterView dengan komponen Transisi, lihat panduan Transisi.
Meneruskan properti dan slot
Kita dapat menggunakan slot untuk meneruskan properti atau slot ke komponen rute:
<router-view v-slot="{ Component }">
<component :is="Component" some-prop="a value">
<p>Beberapa konten slot</p>
</component>
</router-view>Dalam praktiknya, ini biasanya bukan sesuatu yang ingin Anda lakukan, karena komponen rute harus menggunakan properti dan slot yang sama. Lihat Meneruskan Properti ke Komponen Rute untuk cara lain meneruskan properti.
Referensi templat
Menggunakan slot memungkinkan kita menempatkan referensi templat langsung pada komponen rute:
<router-view v-slot="{ Component }">
<component :is="Component" ref="mainContent" />
</router-view>Jika kita menempatkan ref pada <router-view> sebagai gantinya, maka ref akan diisi dengan instance RouterView, bukan komponen rute.
Platform Lainnya
Berita Piala Dunia
Jika Anda memiliki pertanyaan, silakan kirim email ke [email protected]