Cara membuat template dengan component di VueJS, mempunyai beberapa kelebihan, dan di sarankan nanti kedepannya teman-teman harus sudah terbiasa membuat template dengan sebuah component, karena apa nanti kita akan bahas, oke jangan kemana-mana simak terus ya teman-teman.

dengan menggunakan component kita hanya perlu mengetikan tag yang kita buat di komponent, saya menyebutnya tag yang kita buat ya, seterah teman-teman ingin mendefiniskan seperti apa, jadi langkah pertama jika kita ingin membuat template dengan component pertama adalah teman-teman buat.

nama-tag itu lah untuk penampung dari sebuah data, layaknya seperti app yang biasa kita buat pada sebelumnya, tetapi ini masih anak dari sebuah tag app ya, jadi jika teman-teman sudah membuat seperti di atas, kita hanya menuliskan di html nya seperti ini:

bagaimana cukup simple bukan, walaupun kelihatannya hanya nama tag, tetapi sebenarnya di dalamnya ada sebuah banyak data, misalnya seperti yang kita akan buat sesaat lagi, oke untuk membuat sebuah struktur atau kerangkan nya, teman-teman harus menambahkan sebuah template, seperti ini:

jadi struktur atau kerangka HTMLnya kita buat di template, dan walaupun kita menggunakan component kita masih bisa menggunakan bantuan dari vuejs seperti data, methods, computed dan lain-lain, bedanya jika kita sudah menggunakan component data bersifta function sekarang.

oke untuk kasus cara membuat template dengan component di VueJS, saya akan membuat sebuah tombol button dan ketika saya klik akan bertambah satu, seperti yang teman-teman lihat pada template di atas, dan seperti inilah caranya.

silahkan teman-teman copy maka akan tampak seperti ini:

cara membuat template dengan component di VueJS

Silahkan teman-teman klik maka bilangan di bawah akan bertambah satu, dan silahkan teman-teman di struktur HTMLnya copy <button-counter></button-counter> menjadi 3x maka akan tampak hasil template 3x juga seperti ini

cara membuat template dengan component di VueJS

Bagaimana sangat menarik bukan, itulah salah satu kelebihan kita menggunakan component, oke saya rasa cukup sampai disini dulu belajar kita tentang cara membuat template dengan component di VueJS, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.