Komponen & Props di Vue — CompileDaily Study

Penjelasan

Komponen Vue biasanya berupa file .vue terpisah, diimpor dan dipakai di komponen lain layaknya tag HTML custom. Props didefinisikan lewat defineProps() di dalam <script setup>, dan dikirim dari komponen induk lewat atribut biasa (atau v-bind untuk data dinamis).

Contoh Konsep

<!-- KartuProduk.vue -->
<script setup>
const props = defineProps({
    nama: String,
    harga: Number,
});
</script>

<template>
    <div class="kartu">
        <h2>{{ nama }}</h2>
        <p>Rp {{ harga }}</p>
    </div>
</template>

<!-- App.vue -->
<script setup>
import KartuProduk from './KartuProduk.vue';
</script>

<template>
    <KartuProduk nama="Kaos CompileDaily" :harga="99000" />
</template>

Praktikum

Buat komponen KartuArtikel.vue yang menerima props judul (String) dan penulis (String) lewat defineProps(), menampilkan keduanya dalam <h2> dan <p>. Impor dan pakai komponen itu minimal 2 kali di App.vue dengan data berbeda.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Props bersifat READ-ONLY dari sudut pandang komponen anak — JANGAN pernah mengubah props.nama langsung di dalam komponen yang menerimanya, kalau butuh nilai lokal yang bisa diubah berdasarkan props, salin dulu ke ref() terpisah di dalam komponen anak.