Skip to content

Commit f39e3e0

Browse files
committed
2.6: add clarification about mixing abbreviated default slot w/ named slots
1 parent 845fff2 commit f39e3e0

File tree

1 file changed

+26
-0
lines changed

1 file changed

+26
-0
lines changed

src/v2/guide/components-slots.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -285,6 +285,32 @@ This can be shortened even further. Just as non-specified content is assumed to
285285
</current-user>
286286
```
287287

288+
Note that the abbreviated syntax for default slot **cannot** be mixed with named slots, as it would lead to scope ambiguity:
289+
290+
``` html
291+
<!-- INVALID, will result in warning -->
292+
<current-user v-slot="slotProps">
293+
{{ slotProps.user.firstName }}
294+
<template v-slot:other="otherSlotProps">
295+
slotProps is NOT available here
296+
</template>
297+
</current-user>
298+
```
299+
300+
Whenever there are multiple slots, use the full `<template>` based syntax for _all_ slots:
301+
302+
``` html
303+
<current-user>
304+
<template v-slot:default="slotProps">
305+
{{ slotProps.user.firstName }}
306+
</template>
307+
308+
<template v-slot:other="otherSlotProps">
309+
...
310+
</template>
311+
</current-user>
312+
```
313+
288314
### Destructuring Slot Props
289315

290316
Internally, scoped slots work by wrapping your slot content in a function passed a single argument:

0 commit comments

Comments
 (0)