作为道具传递的渲染组件答案

【问题标题】：Render component passed as props作为道具传递的渲染组件
【发布时间】：2021-09-08 01:03:35
【问题描述】：

我正在开发一个呈现“按钮”的组件 - 一个在点击时触发某些功能的图标。
我将数据作为道具传递，但图标实际上是组件，因为我使用的是 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>

【问题讨论】：

另外，onClick: someFunction() 和 @click="someFunction" 是错误的，很可能应该是 onClick: someFunction 和 @click="button.onClick"

标签： vue.js vuejs3

【解决方案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>

【讨论】：