Open zyuan8591 opened 1 year ago
<button class="fancy-btn"> <slot></slot> </button>
<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div>
v-slot:header 可簡寫為 #header
<BaseLayout> <template v-slot:header> <!-- header 插槽的内容放这里 --> </template> </BaseLayout>
<base-layout> <template v-slot:[dynamicSlotName]> ... </template> </base-layout>
<MyComponent v-slot="{ text, count }"> {{ text }} {{ count }} </MyComponent>
<FancyList :api-url="url" :per-page="10"> <template #item="{ body, username, likes }"> <div class="item"> <p>{{ body }}</p> <p>by {{ username }} | {{ likes }} likes</p> </div> </template> </FancyList>
named slot
v-slot:header 可簡寫為 #header
dynamic slot
default slot pass props
named slot pass props