Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang Component Dasar, bagaimana membuat komponen, menggunakannya di App.vue, dan memahami konsep reusable component.
Pada artikel kali ini, kita akan membahas tentang Props di Vue, yaitu cara mengirim data dari parent component ke child component.
Apa Itu Props?
Props (kependekan dari properties) adalah mekanisme untuk mengirim data dari komponen induk (parent) ke komponen anak (child). Dengan props, kita bisa membuat komponen yang dinamis dan lebih fleksibel.
Contoh nyata:
- Komponen
Button bisa menerima props label untuk teks tombol.
- Komponen
Card bisa menerima props title dan content.
Membuat Komponen dengan Props
Mari kita buat file HelloWorld.vue di folder src/components/ dengan kode berikut:
<script setup>
defineProps({
name: String
})
</script>
<template>
<h2>Halo, {{ name }}!</h2>
</template>
Di sini, kita mendefinisikan sebuah props bernama name dengan tipe String.
Mengirim Props dari Parent
Sekarang, kita gunakan komponen tersebut di App.vue.
<script setup>
import HelloWorld from "./components/HelloWorld.vue"
</script>
<template>
<div>
<HelloWorld name="Budi" />
<HelloWorld name="Siti" />
<HelloWorld name="Andi" />
</div>
</template>
Hasilnya:
Halo, Budi!
Halo, Siti!
Halo, Andi!
Multiple Props
Kita bisa mengirim lebih dari satu props ke komponen.
<script setup>
defineProps({
title: String,
description: String
})
</script>
<template>
<div>
<h3>{{ title }}</h3>
<p>{{ description }}</p>
</div>
</template>
Pemanggilan di App.vue:
<template>
<Card title="Belajar Vue" description="Dasar Vue.js untuk pemula" />
<Card title="Belajar React" description="Dasar React.js untuk pemula" />
</template>
Props dengan Default Value
Kita bisa memberi nilai default pada props dengan withDefaults.
<script setup>
const props = withDefaults(
defineProps<{
label?: string
}>(),
{
label: "Tombol Default"
}
)
</script>
<template>
<button>{{ props.label }}</button>
</template>
Jika kita tidak memberikan label, maka otomatis nilainya adalah "Tombol Default".
Validasi Props
Vue memungkinkan kita menambahkan validasi tipe data props agar lebih aman.
<script setup>
defineProps({
age: {
type: Number,
required: true
}
})
</script>
<template>
<p>Umur saya {{ age }} tahun</p>
</template>
Jika props age tidak diberikan, maka Vue akan menampilkan warning di console.
Kesimpulan
Pada artikel ini, kita sudah belajar tentang Props di Vue, mulai dari pengertian, cara mengirim data dari parent ke child, multiple props, default value, hingga validasi props. Dengan props, komponen menjadi lebih dinamis, fleksibel, dan mudah digunakan kembali.
Di artikel berikutnya, kita akan membahas tentang State & Reactive Data, yaitu bagaimana menyimpan dan mengelola data di dalam sebuah komponen.
Terima kasih