docs icon indicating copy to clipboard operation
docs copied to clipboard

Using named slots directly on the component

Open skirtles-code opened this issue 2 years ago • 0 comments

There are a few places in the docs where we imply or state that you can only use v-slot directly on the component tag for the default slot. So, for example, this isn't allowed:

<MyComponent #header>
  Header content
</MyComponent>

Following the docs, this should be written using a <template> tag instead:

<MyComponent>
  <template #header>
    Header content
  </template>
</MyComponent>

But, in practice, this first example does seem to work.

I'm unclear whether this is intentional or not.


The Vue 2 docs are really explicit about this, https://v2.vuejs.org/v2/guide/components-slots.html:

Note that v-slot can only be added to a <template> (with one exception), unlike the deprecated slot attribute.

The Vue 3 guide isn't quite so explicit, but the slots guide gives no indication that this is supported. In the API reference it copies the wording from the Vue 2 docs:

Limited to [...] components (for a lone default slot with props)

The RFC, https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md, doesn't tackle this directly, but it does strongly imply that only the default slot can be used this way:

v-slot can be used directly on a component, without an argument, to indicate that the component's default slot is a scoped slot

skirtles-code avatar Jan 27 '23 01:01 skirtles-code