Vue အတွင်း အဖြစ်အပျက်များ ထုတ်လွှင့်ခြင်း
သင်သိပြီးဖြစ်သည့်အတိုင်း အချက်အလက်များသည် parent components မှ child components သို့ သွားလာကြသည်။ ယခု child components များက parent components များနှင့် မည်သို့ဆက်သွယ်သည်ကို ကြည့်ကြပါစို့။ ၎င်းကို အဖြစ်အပျက်များ ထုတ်လွှင့်ခြင်း (emitting events) ဖြင့် လုပ်ဆောင်သည်။ လက်တွေ့တွင် ကြည့်ကြပါစို့။
Parent component အတွင်း မည်သည့်နည်းလမ်းကိုမဆို ရှိသည်ဆိုပါစို့။
methods: {
func() {
alert('xxx');
}
}
ထိုနည်းလမ်းကို child component သို့ parameter အဖြစ် ပို့ပါ။
<template>
<User @show="func" />
</template>
ထုတ်လွှင့်မည့်အဖြစ်အပျက်ကို emits configuration အတွင်း သတ်မှတ်ပါ။
export default {
emits: ['show'],
data() {
return {
}
}
}
ယခု child component အတွင်း button တစ်ခုလုပ်ပြီး ၎င်းကိုနှိပ်သည့်အခါ ကိုင်တွယ်ဖြေရှင်းပါစို့။
<template>
<button @click="handle">btn</button>
</template>
ကလစ်နှိပ်မှုကို ကိုင်တွယ်သည့် function တစ်ခု လုပ်ပါ။
methods: {
handle() {
}
}
ယခု ကလစ်နှိပ်မှုကို ကိုင်တွယ်သည့် function အတွင်း parent function ကို ခေါ်ယူပါစို့။
ထိုသို့လုပ်ဆောင်ရန် $emit function ကိုသုံးပြီး အဖြစ်အပျက်တစ်ခုကို ထုတ်လွှင့်ပါ၊
၎င်း၏ parameter အဖြစ် ထုတ်လွှင့်မည့်အဖြစ်အပျက်၏ အမည်ကို သတ်မှတ်ပေးပါ။
methods: {
handle() {
this.$emit('show');
}
}
Child component အတွင်းသို့ function နှစ်ခု ပို့ပါ။ Child component အတွင်း button နှစ်ခုလုပ်ပါ၊ ထို button တစ်ခုစီသည် ပို့ပေးထားသည့် function တစ်ခုစီကို ခေါ်ယူသင့်သည်။
