Lewati ke konten utama

🧱 Dasar-Dasar Komponen di Vue.js

Komponen adalah blok bangunan utama dalam Vue.js. Dengan komponen, kamu dapat membagi UI menjadi bagian-bagian kecil yang reusable dan lebih mudah dikelola.

🧩 1. Apa Itu Komponen?​

Komponen adalah instance Vue yang memiliki:

  • template (struktur HTML)
  • data (state lokal)
  • props (data dari parent)
  • methods, computed, dan lifecycle hooks

🛠️ 2. Membuat Komponen Sederhana​

Contoh: HelloWorld.vue​

<template>
  <h1>Halo, {{ name }}!</h1>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['name']
};
</script>

🔧 3. Menggunakan Komponen​

Di dalam App.vue:

<template>
  <div>
    <HelloWorld name="Vue.js" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  components: {
    HelloWorld
  }
};
</script>

🔄 4. Struktur Folder Umum​

src/
├── components/
│   └── HelloWorld.vue
├── App.vue
└── main.js

🧠 5. Ciri-Ciri Komponen yang Baik​

  • Fokus pada satu fungsi/tampilan

  • Reusable di berbagai tempat

  • Punya input (props) dan output (events)

  • Tidak terlalu besar (pisah jika melebihi 100–150 baris)

📦 6. Komponen Global vs Lokal​

Komponen Lokal: Didaftarkan dalam file tempat digunakan.

components: {
  HelloWorld
}

Komponen Global: Didaftarkan sekali dan bisa digunakan di mana saja.

import Vue from 'vue';
import HelloWorld from './components/HelloWorld.vue';

Vue.component('HelloWorld', HelloWorld);

⚠️ 7. Aturan Penamaan Komponen​

  • Gunakan PascalCase atau kebab-case

  • Direkomendasikan: MyButton.vue, ProductList.vue

  • Di template: gunakan <my-button> (kebab-case) untuk universal support

✨ 8. Props: Data dari Parent​

<!-- Parent -->
<user-card :username="'andi'" />

<!-- Komponen -->
props: ['username']

Gunakan props untuk komunikasi satu arah dari parent ke child.

📌 Kesimpulan Komponen adalah inti dari pengembangan aplikasi Vue. Dengan membiasakan diri membuat komponen kecil dan modular, kamu akan lebih mudah mengelola dan mengembangkan aplikasi.