Question

我正在学习vue，但是在了解广告位方面遇到了问题。

我有两个组成部分：

BaseIcon

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

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>

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

Answer 1

您可以像使用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>

Answer 2

命名的v槽只能在模板中使用。默认值也可以在组件中使用。查看文档：{{3}}

也：

请注意，与已弃用的slot属性不同，只能将v插槽添加到（一个例外）。 https://vuejs.org/v2/guide/components-slots.html#Abbreviated-Syntax-for-Lone-Default-Slots

插槽未显示-Vue.js

2 个答案: