🟢 Lesson 05 — Components, Props & Emit

1. Basic Component — Reusable HTML Blocks

Component = reusable တဲ့ mini-app တစ်ခုချင်း — ထပ်ခါတလဲလဲ သုံးလို့ရတယ်

// Define component
app.component('user-card', {
  template: `<div class="user-card">...</div>`
})

// Use it
<user-card></user-card>
<user-card></user-card>   <!-- same component, separate instance -->

2. Props — Parent → Child Communication

Parent က child ကို data ပို့ဖို့ props သုံးတယ်

// Child component
app.component('user-profile', {
  props: ['name', 'age', 'role'],  // declare props
  template: `<div>{{ name }} ({{ age }}) — {{ role }}</div>`
})

// Parent template
<user-profile name="Mg Mg" age="25" role="Admin"></user-profile>
<user-profile :name="dynName" :age="dynAge"></user-profile>

3. Props Validation

props: {
  name:     { type: String, required: true },
  age:      { type: Number, default: 0 },
  isActive: { type: Boolean, default: false },
  tags:     { type: Array, default: () => [] }
}

4. $emit — Child → Parent Communication

Child က event emit လုပ်ပြီး Parent က listen လုပ်တယ်

// Child: emit an event
this.$emit('item-deleted', item.id)

// Parent: listen
<todo-item
  v-for="item in todos"
  :item="item"
  @item-deleted="deleteItem"
  @item-toggled="toggleItem"
></todo-item>

5. Slots — Content from Parent

Component ထဲကို custom HTML content ထည့်ဖို့ slot သုံးတယ်

// Child component template
<div class="card">
  <header><slot name="header">Default Header</slot></header>
  <main><slot></slot></main>     <!-- default slot -->
  <footer><slot name="footer"></slot></footer>
</div>

// Parent usage
<my-card>
  <template #header>My Title</template>
  <p>Body content here!</p>
  <template #footer>Footer text</template>
</my-card>