插槽未显示 - Vue.js

Question

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

I got two components:

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 component tags in EventCard .

Answer 1

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

 <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>

Answer 2

The named v-slot can be used only in the template. Default can be used in the component too. See the docs: https://v2.vuejs.org/v2/guide/components-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.org/v2/guide/components-slots.html#Named-Slots

Answer 3

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.