Kali ini aku akan menjelaskan cara menggunakan component di Vue. Selama ini kita sudah mencoba untuk membuat dan memodifikasi component. Tapi, kita hanya belajar dalam satu component saja dan belum belajar cara mengintegrasikan component dengan component lain. Nah, sekarang kita akan mulai untuk menggunakan component yang sudah kita buat di dalam component lain.
Yang kita lakukan selama ini adalah memanggil component dari main.ts dan menampilkan component tersebut. Kita sebut saja component yang dipanggil dari main.ts adalah main component. Nah, main component bisa menggunakan component lain. Caranya cukup mudah, kita bisa memanggil component lain layaknya kita menggunakan element HTML. Misalkan kita punya component dengan nama ChildComponent maka kita tinggal menggunakan <ChildComponent/> untuk memanggilnya, tapi jangan lupa import dulu dengan import ChildComponent from “./ChildComponent.vue”. Untuk lebih jelasnya, mari kita perhatikan contoh sederhana berikut ini. Di bawah ini adalah ChildComponent.vue
<script setup lang="ts">
</script>
<template>
I'm a child, but not your children
</template>
<style scoped>
</style>Di bawah ini adalah MainComponent.vue yang kita create di main.ts.
<script setup lang="ts">
import ChildComponent from "./ChildComponent.vue";
</script>
<template>
<ChildComponent/>
</template>
<style scoped>
</style>Menggunakan Component di Vue Berkali-kali
Perhatikan template pada MainComponent, kita memanggil <ChildComponent/> layaknya element HTML. Dengan import sekali saja, kita bisa bisa lho menggunakan component di vue ini berkali-kali. Component yang kita panggil itu disebut sebagai instance. Jadi istilah yang tepat adalah kita bisa membuat banyak instance dari sebuah component. Setiap instance ini independen meskipun dibuat dari component yang sama. Misalnya ChildComponent ini punya state, lalu kita membuat 2 instance di MainComponent, maka state pada instance pertama tidak mempengaruhi state pada instance kedua. Untuk lebih jelasnya mari kita coba contoh berikut ini.
<!--Child Component-->
<script setup lang="ts">
import {ref} from "vue";
const counter = ref<number>(0);
</script>
<template>
<div>
Counter {{counter}} <button @click="counter++">Increase Me</button>
</div>
</template>
<style scoped></style><!--Main Component-->
<script setup lang="ts">
import ChildComponent from "./ChildComponent.vue";
</script>
<template>
<ChildComponent/>
<ChildComponent/>
</template>
<style scoped></style>Pada contoh di atas, ChildComponent punya state counter yang nilainya bertambah ketika tombol Increase Me di klik. Kita memanggil ChildComponent di MainComponent sebanyak 2 kali sehingga muncul 2 tombol Increase Me. Nah, 2 tombol tersebut tidak akan saling mempengaruhi. Berikut ini tampilannya.
Pada contoh di atas, counter yang atas menampilkan 4 karena Increase Me atas diklik 4 kali, dan counter yang bawah menampilkan 8 karena Increase Me diklik 8 kali.
Penutup
Nah, jadi demikianlah cara menggunakan component di Vue JS. Untuk lebih jelasnya teman-teman juga bisa membaca dokumentasi Vue ya. Sebenarnya kita juga bisa menambahkan attribute layaknya attribute pada element HTML. Untuk caranya, bisa cek ditulisanku berikutnya kalau sudah ditulis. 😂. Semoga tulisan ini bermanfaat untuk kita semua. 🤲
