我觉得这应该非常简单，所以这使它更加混乱。我无法将 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 以了解我如何注册所有内容会有所帮助，请告诉我。谢谢！