插槽未显示 - Vue.js

Question

我现在正在学习 vue，但在理解插槽方面存在问题。

我有两个组件：

1. 基本图标

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

2. 事件卡

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

但是“插槽”并没有替换为 EventCard 中BaseIcon组件标签中的EventCard 。

Answer 1

您可以像v-slot一样使用它，因为不推荐使用slot语法，如此处所述：

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

或速记：

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

Answer 2

命名的 v-slot 只能在模板中使用。 默认值也可以在组件中使用。 请参阅文档： https ://v2.vuejs.org/v2/guide/components-slots.html#Abbreviated-Syntax-for-Lone-Default-Slots

还：

请注意，v-slot 只能添加到 a（有一个例外），这与已弃用的 slot 属性不同。 https://v2.vuejs.org/v2/guide/components-slots.html#Named-Slots

Answer 3

我最近有一个非常相似的问题。 结果发现我的 HTML 标记中有一个小故障（我没有关闭粗体标记）。 据推测，将模板 HTML 转换为 Javascript 脚本的 Vue 例程对这种故障非常敏感（不像多年来一直擅长应对这些故障的浏览器）——所以模板默默地失败了。

我不得不使用费力的“分而治之”的过程来追踪它——把所有东西都剪掉，然后一点一点地粘贴回去。 但是可能有语法检查器可以彻底分析您的模板标记。

值得检查。