Vue တွင် ကလေးကော်မပြုန်းများ ဖန်တီးခြင်း
ကော်မပြုန်းများတွင် အတွင်းပိုင်း၌
ယခင်က ကျွန်ုပ်တို့ အလုပ်လုပ်ခဲ့သည့်
အဓိက ကော်မပြုန်းနှင့် တူညီသော
တည်ဆောက်ပုံရှိသည်။ ဆိုလိုသည်မှာ
ကော်မပြုန်းတစ်ခုစီ၏ ဖိုင်တွင်
script နှင့် template
တဂ်များ ပါရှိမည်ဖြစ်သည်။
ဥပမာအနေနှင့်
User အမည်ရှိ ကော်မပြုန်းတစ်ခု
လုပ်ကြည့်ရအောင်။
၎င်း၏ ကုဒ်ကို သက်ဆိုင်ရာ
ဖိုင်ထဲတွင် ထားကြပါစို့:
<script>
export default {
data() {
return {
}
}
}
</script>
ကော်မပြုန်း၏ data အရာဝတ္ထုထဲတွင်
အချက်အလက်အချို့ကို ထားနိုင်သည်:
<script>
export default {
data() {
return {
name: 'john'
}
}
}
</script>
ထိုအချက်အလက်များကို ကော်မပြုန်း၏ ကိုယ်စားပြုပုံထဲတွင် ပြသနိုင်သည်:
<template>
{{ name }}
</template>
ယခု ကျွန်ုပ်တို့ ဖန်တီးထားသည့် ကော်မပြုန်းကို အဓိက ကော်မပြုန်းသို့ ချိတ်ဆက်ကြည့်ရအောင်။ ဤသို့ပြုလုပ်ရန် အစတွင် ၎င်းကို တင်သွင်းရမည်:
<script>
import User from './components/User.vue'
export default {
}
</script>
၎င်း၏ အမည်ကို components ဆက်တင်ထဲတွင်
�ေးထည့်ပါ:
<script>
import User from './components/User.vue'
export default {
components: {
User
}
}
</script>
မိဘကော်မပြုန်း၏ ကိုယ်စားပြုပုံထဲတွင် ကလေးကော်မပြုန်း၏ ကိုယ်စားပြုပုံကို ပြသနိုင်သည်။ ဤသို့ပြုလုပ်ရန် ကော်မပြုန်း၏ အမည်နှင့် ကိုက်ညီသော တဂ်ကို ရေးရမည်။ ဤသို့လုပ်ကြည့်ရအောင်:
<template>
<User />
</template>
Employee ကော်မပြုန်းကို ပြုလုပ်ပါ။
၎င်းကို အဓိက ကော်မပြုန်းသို့ ချိတ်ဆက်ပါ။
