Belajar Vue Js #6 : Component pada Vue Js

Setelah kemarin kita kenalan dengan Template File, sekarang kita bakal belajar Component pada Vue Js. Component merupakan bagian Krusial dari beberapa Framework Frontend, salah satunya Vue Js, component ini akan memudahkan kita Demi membangun website secara lebih rapi dan terstruktur.

Penjelasan Component pada Vue Js

Component merupakan sebuah petak Kode, yang Dapat kita buat dan gunakan di beberapa halaman, tanpa harus menulis ulang kode tersebut. Sebagai Misalnya, disini kita Mempunyai 1 component dengan nama ButtonCustom.vue

Nah, tombol ini akan kita panggil di Halaman Penting Yakni App.vue dengan menggunakan Metode pemanggilan component Yakni kita import terlebih dahulu, setelah itu kita perkenalkan didalam . Contohnya seperti dibawah ini

Nah, Component pada Vue Js ini memudahkan kita Demi menampilkan ButtonCustom.vue dengan Metode yang sederhana, Yakni import, setelah itu dikenalkan sebagai components, Lewat dipanggil didalam template dengan Metode sesuai bagaimana kita mengimport component ini. Lewat juga kita Mau menggunakan ButtonCustom.vue kembali, kita tinggal panggil kembali ini seperti dibawah ini.

Component ini akan sangat Berfaedah apabila kita sudah Membangun website dengan skala yang lebih besar, selain itu penggunaan component ini juga akan memudahkan kita Demi melakukan maintenance, karena setiap component terpisah sesuai kegunaan masing-masing.

Pengorganisasian Component pada Vue Js

Nah, setelah kita tau konsep dari Component, berikutnya kita harus tau bagaimana component ini biasanya di organisir dalam Vue Js. Karena pada dasarnya, kita Dapat menggunakan component didalam component, seperti Misalnya gambar dibawah ini

Sebagai Misalnya, Kita mungkin Mempunyai komponen header, sidebar, dan area konten, masing-masing biasanya berisi komponen lain Demi tautan navigasi, posting blog, dan sebagainya.

Passing Data antar Component pada Vue Js

Hal selanjutnya yang harus kita pelajari adalah bagaimana Component ini Dapat mendapatkan data dari component atas nya yang Biasa kita sebut parent. Hal ini memungkinkan terjadi dengan yang namanya props.

Props ini akan menangkap data yang diberikan dari parent. seperti ini penerapannya. Pertama kita ke ButtonCustom.vue Tengah, kita akan menambahkan codingan props agar Dapat menerima data. Disini kita akan menambahkan props text, dengan type String. Setelah itu, panggil text kedalam button.

Nah, apabila sudah sekarang kita kembali ke App.vue Lewat kita berikan props (data) ke masing-masing component yang kita miliki.

Setelah itu akan tampil seperti ini.

Jadi tiap-tiap Mempunyai tulisan yang berbeda sesuai apa yang kita inputkan diatas. Kedepannya Lagi banyak hal yang harus kita pelajari tentang props ini mulai dari customasi props yang Dapat kita buat required, bahkan Dapat mendapat props dalam bentuk Array atau Object.

Hasil

Nah disini kita sudah mempelajari bagaimana component ini diterapkan dan bagaiman Metode kita memberikan data ke component pada vue js. Kalian Dapat Menonton dokumentasi langsung dari Vue Js tentang component pada vue js disini.

Kedepannya kita akan belajar tentang bagaimana antar Component pada Vue Js ini Dapat berkomunikasi satu sama lain, jadi apabila component 1 di Klik, parent nya terpengaruh dan sejenisnya.

Nah buat kalian yang mau belajar Tutorial lain Vue js Dapat dilihat disini ya

1. Belajar Vue Js #5 : Template File pada Vue Js