Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang Template Syntax di Vue, bagaimana cara menampilkan data dengan interpolasi, binding atribut, hingga directive dasar seperti v-if, v-for, dan v-model.
Pada artikel kali ini, kita akan membahas tentang Component Dasar. Konsep ini sangat penting karena hampir semua aplikasi Vue dibangun dengan komponen.
Apa Itu Component?
Component adalah bagian kecil dari UI yang bisa digunakan kembali (reusable).
Sebuah aplikasi Vue biasanya terdiri dari banyak komponen kecil yang digabung menjadi satu aplikasi besar.
Jika diibaratkan:
- Website adalah rumah.
- Component adalah bagian penyusunnya, seperti pintu, jendela, atau meja.
Komponen Utama (App.vue)
Ketika membuat proyek Vue dengan Vite, secara default kita punya file App.vue. Inilah komponen utama aplikasi.
<script setup>
const title = "Halo, Vue!"
</script>
<template>
<h1>{{ title }}</h1>
</template>
Komponen ini dipanggil di main.js dan ditampilkan di browser.
Membuat Komponen Baru
Mari kita buat komponen baru bernama HelloWorld.vue di dalam folder src/components/.
<script setup>
const message = "Ini komponen HelloWorld"
</script>
<template>
<div>
<h2>{{ message }}</h2>
</div>
</template>
Menggunakan Komponen di App.vue
Setelah membuat komponen, kita bisa memanggilnya di App.vue.
<script setup>
import HelloWorld from "./components/HelloWorld.vue"
</script>
<template>
<div>
<h1>Komponen Utama</h1>
<HelloWorld />
</div>
</template>
Penjelasan:
- Kita mengimpor
HelloWorld.vue.
- Lalu memanggilnya dengan
<HelloWorld />.
- Vue otomatis mengenali tag komponen sesuai nama file yang di-import.
Reusable Component
Komponen bisa digunakan berkali-kali di dalam aplikasi.
<script setup>
import HelloWorld from "./components/HelloWorld.vue"
</script>
<template>
<div>
<HelloWorld />
<HelloWorld />
<HelloWorld />
</div>
</template>
Hasilnya: komponen HelloWorld akan tampil tiga kali.
Aturan Penamaan Komponen
- Nama file biasanya menggunakan huruf besar di awal, misalnya
HelloWorld.vue.
- Saat dipakai di template, kita bisa menggunakan
<HelloWorld /> atau <hello-world />.
- Semua komponen harus punya satu elemen root di dalam
<template>.
Contoh yang salah:
<template>
<h1>Hello</h1>
<p>World</p>
</template>
Akan error karena ada lebih dari satu root element.
Contoh benar:
<template>
<div>
<h1>Hello</h1>
<p>World</p>
</div>
</template>
Kesimpulan
Pada artikel ini, kita sudah belajar tentang Component Dasar di Vue. Kita sudah membuat komponen baru, memanggilnya di dalam App.vue, menggunakan kembali berkali-kali, serta memahami aturan penamaan dan struktur komponen.
Di artikel berikutnya, kita akan membahas tentang Props, yaitu cara mengirim data dari parent component ke child component di Vue.
Terima kasih