插槽未显示 - Vue.js答案

【问题标题】：Slots are not showing - Vue.js插槽未显示 - Vue.js
【发布时间】：2020-09-24 09:11:56
【问题描述】：

我现在正在学习 vue，但对插槽的理解有问题。

我有两个组件：

基本图标

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

事件卡

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

但是“slot”并没有替换为EventCard 中的BaseIcon 组件标签中的内容。

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

您可以像v-slot 一样使用它，因为slot 语法已被弃用，如here 所述：

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

或简写：

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

【讨论】：

不，这也是问题。
请检查我编辑的答案，我在按钮内使用了模板

【解决方案2】：

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

还有：

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

【讨论】：

那么，您认为我应该怎么做？

【解决方案3】：

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

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

值得一试。

【讨论】：