I'm learning vue right now and have problems with understanding the slots.

I got two ponents:

1. BaseIcon

<template>
     ...
     <slot name="test"></slot> 
     ...
<template/>

2. EventCard

<template>
  <router-link class="event-link" :to="{ name: 'event-show', params: {id: '1'}}">
      ..
      <BaseIcon name="users" slot="test">{{ event.attendees.length }} attending</BaseIcon>
      ..
  </router-link>
</template>

But the the "slot" ain't replaced with the content in the BaseIcon ponent tags in EventCard.

I'm learning vue right now and have problems with understanding the slots.

I got two ponents:

1. BaseIcon

<template>
     ...
     <slot name="test"></slot> 
     ...
<template/>

2. EventCard

<template>
  <router-link class="event-link" :to="{ name: 'event-show', params: {id: '1'}}">
      ..
      <BaseIcon name="users" slot="test">{{ event.attendees.length }} attending</BaseIcon>
      ..
  </router-link>
</template>

But the the "slot" ain't replaced with the content in the BaseIcon ponent tags in EventCard.

• javascript
• vue.js
• vuejs2
• vue-ponent

3 Answers 3

You could use it like v-slot because slot syntax is deprecated as mentioned here:

 <BaseIcon name="users">
   <template v-slot:test>
    {{ event.attendees.length }} attending
   </template>
</BaseIcon>

or a shorthand :

 <BaseIcon name="users" >
    <template #test>
    {{ event.attendees.length }} attending
   </template>
</BaseIcon>

I had a very similar problem recently. Turned out there was a tiny glitch in my HTML markup (I hadn't closed a bold tag). Presumably, the Vue routine that converts template HTML into Javascript script is super sensitive to this kind of glitch (unlike browsers which have been brilliant at coping with them for years) - so the template was silently failing.

I had to use a laborious "divide and conquer" process to track it down - chop everything out, then paste it back bit by bit. But there may be syntax checkers out there that would analyse your template markup thoroughly.

Worth checking.

The named v-slot can be used only in the template. Default can be used in the ponent too. See the docs: https://v2.vuejs/v2/guide/ponents-slots.html#Abbreviated-Syntax-for-Lone-Default-Slots

Also:

Note that v-slot can only be added to a (with one exception), unlike the deprecated slot attribute. https://v2.vuejs/v2/guide/ponents-slots.html#Named-Slots