Setelah kemarin kita kenalan dengan Template File, sekarang kita bakal belajar Component pada Vue Js. Component merupakan bagian penting dari beberapa Framework Frontend, salah satunya Vue Js, component ini akan memudahkan kita untuk membangun website secara lebih rapi dan terstruktur.
Penjelasan Component pada Vue Js
Component merupakan sebuah petak Kode, yang bisa kita buat dan gunakan di beberapa halaman, tanpa harus menulis ulang kode tersebut. Sebagai contoh, disini kita memiliki 1 component dengan nama ButtonCustom.vue
<template>
<button @click="data++" class="btn-custom">Clicked {{ data }} times</button>
</template>
<script>
export default {
data() {
return {
data: 0,
};
},
};
</script>
<style scoped>
.btn-custom {
padding: 8px;
border-radius: 8px;
background-color: white;
color: black;
cursor: pointer;
}
.btn-custom:hover {
background-color: #eaeaea;
}
</style>Nah, tombol ini akan kita panggil di Halaman utama yaitu App.vue dengan menggunakan cara pemanggilan component yaitu kita import terlebih dahulu, setelah itu kita perkenalkan didalam <script>. Contohnya seperti dibawah ini
<template>
<div>
<ButtonCustom />
</div>
</template>
<script>
import ButtonCustom from "./components/ButtonCustom.vue";
export default {
components: { ButtonCustom },
};
</script>
Nah, Component pada Vue Js ini memudahkan kita untuk menampilkan ButtonCustom.vue dengan cara yang sederhana, yaitu import, setelah itu dikenalkan sebagai components, lalu dipanggil didalam template dengan cara <ButtonCustom/> sesuai bagaimana kita mengimport component ini. Lalu juga kita ingin menggunakan ButtonCustom.vue kembali, kita tinggal panggil kembali <ButtonCustom/> ini seperti dibawah ini.
<template>
<div>
<ButtonCustom />
<ButtonCustom />
<ButtonCustom />
</div>
</template>
<script>
import ButtonCustom from "./components/ButtonCustom.vue";
export default {
components: { ButtonCustom },
};
</script>
Component ini akan sangat berguna apabila kita sudah membuat website dengan skala yang lebih besar, selain itu penggunaan component ini juga akan memudahkan kita untuk 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 bisa menggunakan component didalam component, seperti contoh gambar dibawah ini
Sebagai contoh, Kita mungkin memiliki komponen header, sidebar, dan area konten, masing-masing biasanya berisi komponen lain untuk tautan navigasi, posting blog, dan sebagainya.
Passing Data antar Component pada Vue Js
Hal selanjutnya yang harus kita pelajari adalah bagaimana Component ini bisa 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 lagi, kita akan menambahkan codingan props agar bisa menerima data. Disini kita akan menambahkan props text, dengan type String. Setelah itu, panggil text kedalam button.
<template>
<button class="btn-custom">{{ text }}</button>
</template>
<script>
export default {
props: {
text: {
type: String,
},
},
};
</script>
<style scoped>
.btn-custom {
padding: 8px;
border-radius: 8px;
background-color: white;
color: black;
cursor: pointer;
}
.btn-custom:hover {
background-color: #eaeaea;
}
</style>
Nah, apabila sudah sekarang kita kembali ke App.vue lalu kita berikan props (data) ke masing-masing component yang kita miliki.
<template>
<div>
<ButtonCustom :text="'Text Pertama'" />
<ButtonCustom :text="'Ini Props Kedua'" />
<ButtonCustom :text="'Ini Props text 3'" />
</div>
</template>
<script>
import ButtonCustom from "./components/ButtonCustom.vue";
export default {
components: { ButtonCustom },
};
</script>Setelah itu akan tampil seperti ini.
Jadi tiap-tiap <ButtonCustom/> memiliki tulisan yang berbeda sesuai apa yang kita inputkan diatas. Kedepannya masih banyak hal yang harus kita pelajari tentang props ini mulai dari customasi props yang bisa kita buat required, bahkan bisa mendapat props dalam bentuk Array atau Object.
Kesimpulan
Nah disini kita sudah mempelajari bagaimana component ini diterapkan dan bagaiman cara kita memberikan data ke component pada vue js. Kalian bisa melihat dokumentasi langsung dari Vue Js tentang component pada vue js disini.
Kedepannya kita akan belajar tentang bagaimana antar Component pada Vue Js ini bisa 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 bisa dilihat disini ya
