Question

我正在开发一个呈现“按钮”的组件 - 一个在点击时触发某些功能的图标。
我将数据作为道具传递，但图标实际上是组件，因为我使用的是 mdue 库并且无法正确呈现它们。

我作为道具和图标导入的按钮数组：

import {
  FormatBold, FormatItalic,
} from 'mdue';

buttons: [
  { icon: FormatBold, onClick: someFunction() },
  { icon: FormatItalic, onClick: someFunction() },
]

这是我尝试在其他组件中显示它们的方式

<div v-for="(button, index) in buttons" :key="index" @click="someFunction">
  {{ button.icon }}
</div>

屏幕上显示的内容：
{“名称”：“”}
{“名称”：“”}

使用该库中图标的正确方法：

<template>
  <format-bold></format-bold>
</template>

Answer 1

由于您的图标是组件而不仅仅是图标的名称 - 您应该使用 component 标签呈现它们，而不是插入它们的内容：

<button v-for="(button, index) in buttons" :key="index" @click="button.onClick">
  <template v-if="button.icon">
    <component :is="button.icon" />
  </template>
</div>

渲染组件作为道具传递

1 个答案: