ရိုးရိုးလေး ရှင်းပြမယ်
Props က data ပို့သကဲ့သို့ slots က template content ပို့သည်။ Card, modal နှင့် layout ကဲ့သို့ wrapper component များတွင် slot သင့်တော်သည်။ Named slot ဖြင့် header/body/footer ကိုခွဲနိုင်ပြီး scoped slot ဖြင့် child data ကို parent template သို့ပေးနိုင်သည်။
vue
<!-- BaseCard.vue -->
<template>
<article class="card">
<header><slot name="title">Untitled</slot></header>
<div><slot /></div>
<footer><slot name="actions" /></footer>
</article>
</template>
<!-- usage -->
<BaseCard>
<template #title>Vue Course</template>
<p>20 practical lessons</p>
<template #actions><button>Start</button></template>
</BaseCard>You should see
Vue Course
20 practical lessons
[Start]လက်တွေ့စမ်းကြည့်ရန်
Header, content နှင့် footer named slots ပါသော BaseModal component တစ်ခုရေးပါ။
Slots — Vue.js