Props and One-Way Data Flow

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

defineProps သုံးရန်
Dynamic props bind လုပ်ရန်
Props ကိုမပြောင်းသင့်သည့်အကြောင်းနားလည်ရန်

ရိုးရိုးလေး ရှင်းပြမယ်

Props သည် parent မှ child သို့ one-way data flow ဖြစ်သည်။ Child က prop ကိုတိုက်ရိုက်မပြောင်းဘဲ ပြောင်းလဲလိုပါက event emit လုပ်ရမည်။ Type, required နှင့် default validation များဖြင့် component contract ကိုရှင်းလင်းစေပါ။

vue

<!-- ProductCard.vue -->
<script setup>
const props = defineProps({
  title: { type: String, required: true },
  price: { type: Number, default: 0 }
})
</script>

<template>
  <article>
    <h3>{{ props.title }}</h3>
    <p>{{ props.price.toLocaleString() }} MMK</p>
  </article>
</template>

You should see

Vue Handbook
18,000 MMK

လက်တွေ့စမ်းကြည့်ရန်

UserBadge component ကို name, role နှင့် online Boolean props များဖြင့် တည်ဆောက်ပါ။

Props — Vue.js

ဒီနေရာမှာ လူအများမှားတတ်တယ်

Child ထဲမှ prop ကိုတိုက်ရိုက် mutate လုပ်ခြင်း
Number prop ကို :price မသုံးဘဲ string အဖြစ်ပို့ခြင်း

လေ့ကျင့်ခန်း

UserBadge component ကို name, role နှင့် online Boolean props များဖြင့် တည်ဆောက်ပါ။

You'll know it worked when: Vue Handbook 18,000 MMK