Tentang Dynamic Component Pada Vue Js Part 1

Masih tentang sistem component pada Vue Js. Kali ini kita akan belajar tentang dynamic component. Ide simplenya kita punya beberapa component dimana kita bisa mengubah component mana yang akan diaktifkan. Jadi istilahnya kita buat beberapa halaman dan sangat cocok bila teman teman ingin membuat SPA (Single Page Application) atau aplikasi satu halaman. Untuk memulainya yang pertama anggap saja kita punya dua halaman yakni ada halaman home dan halaman posts. Tentu kita akan buat component untuk kedua halaman tersebut yang isi componentnya atau halamannya akan berbeda beda. Saya akan daftarkan home sebagai Vue Component lalu untuk isi templatenya kita berikan id home-template seperti berikut

Dan selanjutnya yang kedua saya akan buat untuk component berikutnya yaitu posts sebagai nama Vue Componentnya seperti ini

Karena component posts ini punya data postsnya maka dari itu akan buat object data yang datanya dalam bentuk function return

Kita akan mereturn hasil data array postsnya yang kita pisahkan dengan koma untuk nilai satu dengan nilai lainnya sebagai berikut 

Nah sekarang kita sudah punya beberapa posts yang kita simpan didalam array sebagai component posts-templatenya. Sekarang tugas berikutnya yang kita lakukan adalah menuliskan di HTML-nya yakni tag <component> sebagai berikut

Yang memiliki directive v-bind is dengan nilai currentView. currentView ini adalah data atau property yang akan kita definisikan sebagai data didalam Object Vue-nya yang nilainya sendiri adalah nilai default component yang aktif

Kita tulis sesuai dengan nama componentnya yakni home. Artinya secara otomatis sistem component yang aktif pertama kali di jalankan adalah halaman Home. Tentu tugas kita selanjutnya akan kita lanjutkan pada bagian artikelnya berikutnya. Semoga jelas dan Terima kasih