Penggunaan Sistem Component Pada Vue Js

Pada bagian sebelumnya kita sudah berhasil membuat tag html custom dengan sistem component dari Vue jsnya. Jadi bila tiap teman teman butuh template tersebut artinya masih didalam Object Vuenya teman teman bisa gunakan template tersebut berkali kali. Tentu itu cara dasarnya pembuatannya. Nah teman teman pun bisa menyederhanakan dengan menggunakan satu metode saja yaitu mendefinisikan isi templatenya dan juga register nama templatenya didalam Vue component artinya dibagian artikel ini saya akan menjelaskan cara kedua dalam pembuatan sistem component pada Vue js. Tentu caranya cukup simple kita define dan register didalam Vue component templatenya seperti berikut

Kalo kita reload halamannya kita akan dapat hasilnya tanpa ada error sama sekali.

Jadi itu dia penulisan singkat dalam menuliskan component Vue jsnya. Sekali lagi parameter yang pertama adalah nama tag yang ingin kita berikan dibagian layoutnya 

Lalu parameter kedua adalah isi template yang mau kita buat. Tentu dibagian template ini kita pun bisa punya beberapa tag htmlnya seperti tag <img> tag anchor atau pun tag tag html lainnya. Nah untuk itu kita pun bisa membuat tag <template> sebagai component templatenya

Yang dimana tugasnya untuk membuat tampilan viewnya. Jadi tag <template> ini adalah tag dari HTML 5 nya dan tag tersebut tidak akan dirender. Tentu setelah itu yang kita bisa lakukan pertama kali adalah menuliskan nama id sebagai nama id templatenya.

Lalu dibagian tag <template> kita berikan attribute id yang id-nya harus sama dengan id yang kita definisikan dibagian Vue component templatenya. 

Jadi dengan kata lain isi template componentnya bukan lagi kita definisikan di Vue component karena bisa jadi HTML yang kita buat itu banyak maka dari itu tag <template> ini lah yang bertugas menyimpan sistem component templatenya yang sudah kita berikan id

Maka kalo kita lihat dibagian browsernya kita dapat hasil yang di inginkan yaitu hasil component templatenya. Jadi caranya sangat sederhana.