我无法获取要在我的插槽中显示的信息

Question

我觉得这应该超级简单，所以这让它变得更加混乱。我无法将 EventCard 中的文本放入 BaseIcon 插槽。

我的 BaseIcon 组件看起来像这样...

<template>
  <div class="icon-wrapper" v-html="svg">
    <slot name="icon">sdfsdf</slot>
  </div>
</template>

<script>
import feather from 'feather-icons'
export default {
  name: 'Icon',
  props: {
    name: String,
    width: {
      type: [Number, String],
      default: 24
    },
    height: {
      type: [Number, String],
      default: 24
    }
  },
  computed: {
    svg() {
      return feather.icons[this.name].toSvg({
        class: 'icon',
        width: this.width,
        height: this.height
      })
    }
  }
}
</script>

我的 EventCard 组件看起来像这样..

<template>
  <router-link
    class="event-link"
    :to="{ name: 'event-show', params: { id: '1' } }"
    >Event Show #1
    <div class="event-card -shadow">
      <span class="eyebrow">@{{ event.time }} on {{ event.date }}</span>
      <h4>{{ event.title }}</h4>
      <BaseIcon name="users">
        <template v-slot:icon>
          <h3>{{ event.attendees.length }} attending</h3>
        </template>
      </BaseIcon>
    </div>
  </router-link>
</template>

<script>
export default {
  data() {
    return {
      event: {
        id: 1,
        title: 'Park Cleanup',
        date: 'Tues Aug 19, 2018',
        time: '6:00',
        attendees: [
          { id: 'abc123', name: 'Adam Jahr' },
          { id: 'asd246', name: 'Gregg Fors' }
        ]
      }
    }
  }
}
</script>

不使用插槽一切正常。图标显示，但文本和参加者长度未显示。任何帮助将不胜感激！！！如果有帮助的话，我的所有组件也会在全球范围内注册。我也安装了 lodash 和 feather-icons。如果查看 main.js 以了解我如何注册所有内容会有所帮助，请告诉我。谢谢！

Answer 1

问题来自v-html。由于这个指令，你不能在 div 之间放置任何东西。

我不知道您要做什么，但也许您应该将插槽放在 div 旁边？

<template>
  <div>

    <div class="icon-wrapper" v-html="svg">
    </div>

    <slot name="icon">sdfsdf</slot>

  </div>
</template>