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

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和羽毛图标。如果能看到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>