Vue.js記法:Slot記法

複数のslotを利用する場合、nameを明記しよう

<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div>

slotProps

<current-user> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> </current-user>
一つだけの場合なら、:defaultは不要 <current-user v-slot="slotProps"> {{ slotProps.user.firstName }} </current-user>

複数slotなら、:slotnameが必須 <current-user> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> <template v-slot:other="otherSlotProps"> ... </template> </current-user>
slot name bind
<current-user v-slot="{ user }"> {{ user.firstName }} </current-user>
<current-user v-slot="{ user: person }"> {{ person.firstName }} </current-user>
<current-user v-slot="{ user = { firstName: 'Guest' } }"> {{ user.firstName }} </current-user>

動的slot名
<base-layout> <template v-slot:[dynamicSlotName]> ... </template> </base-layout>

v-slot:の短縮化記法：#

<base-layout> <template #header> <h1>Here might be a page title</h1> </template> <p>A paragraph for the main content.</p> <p>And another one.</p> <template #footer> <p>Here's some contact info</p> </template> </base-layout>

slot name bindの場合、slot名が必須
<current-user #default="{ user }"> {{ user.firstName }} </current-user>