In new slot documentation in one place it states:
Whenever there are multiple slots, use the full <template> based syntax for all slots
And in another section (Named Slots Shorthand) there is an example:
<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>
So what is the best practice for defining default slot when there are multiple of them?
If I get what you mean correctly, it seems you're confused between the _abbreviated syntax for lone default slots_ (<user><template v-slot:default="slotProps"/></user> => <user v-slot="slotProps"/>) and the _shorthand syntax_ (<template v-slot:header> => <template #header>). The example above uses shorthand syntax while still correctly adheres to the "full <template> based" syntax for multiple slots.
Whenever there are multiple slots, use the full based syntax for all slots
I believe it should be stated as “Whenever there are multiple slots with slot props passing down”?
@phanan
No, I meant that the example should have wrapper over default slot
OR
It should be stated:
Whenever there are multiple slots, use the full based syntax for all named slots
Could you please specify this topic?
I don't have a strong opinion unfortunately. Reopening for exposure.
Just to clarify what I have meant:
In one place docs says to wrap default slot in template tags when there are multiple slots:
Whenever there are multiple slots, use the full <template> based syntax for all
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
<template v-slot:other="otherSlotProps">
...
</template>
</current-user>
And in another places slot docs doesn't stick to this rule:
<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>
And yet, in another place says it is optional to stick to this rule:
However, you can still wrap default slot content in a <template> if you wish to be explicit:
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<template v-slot:default>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>
I'm going to try to rewrite this section with a few more details coming up with the Vue 3 release, I'll try to fix this in that update.
Most helpful comment
I'm going to try to rewrite this section with a few more details coming up with the Vue 3 release, I'll try to fix this in that update.