Thuta Learning
ရှာဖွေရန်
IntermediateWeb Developmentbeginner

Component Events

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

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

  • Custom event ကြေညာရန်
  • Payload ပို့ရန်
  • Parent listener ချိတ်ရန်

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

Parent က data ကို props ဖြင့်အောက်သို့ပို့ပြီး child က action ကို events ဖြင့်အပေါ်သို့ပို့သည်။ defineEmits က component ကထုတ်မည့် event များကို document လုပ်ပြီး emit function ပြန်ပေးသည်။ Event name ကို kebab-case သုံးပါ။

vue
<!-- QuantityPicker.vue -->
<script setup>
const props = defineProps({ modelValue: Number })
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <button @click="emit('update:modelValue', props.modelValue - 1)">−</button>
  <span>{{ props.modelValue }}</span>
  <button @click="emit('update:modelValue', props.modelValue + 1)">+</button>
</template>
You should see
− 2 +

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

Delete button ပါသော TaskItem component တည်ဆောက်ပြီး task id ကို delete event payload ဖြင့် parent သို့ပို့ပါ။

Component EventsVue.js

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

  • Event က component tree အဆင့်များစွာအလိုအလျောက်တက်မည်ဟုယူဆခြင်း
  • Event name စာလုံးပေါင်း parent/child မတူခြင်း

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

Delete button ပါသော TaskItem component တည်ဆောက်ပြီး task id ကို delete event payload ဖြင့် parent သို့ပို့ပါ။

You'll know it worked when: − 2 +

Component Events | Thuta Learning