如何在 Vue 中动态制作按钮更新组件？

Question

我确定以前有人问过这个问题，但我在任何地方都找不到。我只需要在循环中动态加载按钮上的组件。你能从脚本部分调用组件文件吗？我有一个带有下载按钮的循环卡片，但是每次单击按钮时这些文件都不同，我可以...

<template>
<v-row>
 <v-col v-for="(item, i) in archives">
  <v-btn>
   {{ item.component }}
  <v-btn/>
 <v-col />
<v-row/>

<template />

<script>
 data: () => ({
  archives: [
      {
        title: '',
        description: '',
        note: '',
        icon: '',
        color: '',
        component: 'ComponentName', <-- Here for instance call the component
      },
   }
})
<script />

我希望我说清楚了。我只需要 v-for 中的渲染按钮即可从脚本标签中打开组件名称。正如我所说，有多个带有下载按钮的 v-cards，但每个按钮都必须打开脚本中指定的组件。

Answer 1

如图所示：https://vuejs.org/guide/essentials/component-basics.html#dynamic-components

您可以像这样使用动态组件

<component :is="myCurrentlyDynamicComponent"></component>

myCurrentlyDynamicComponent是一个组件的名字，你当然需要首先导入。

如何在 Vue 中动态制作按钮更新组件？

How to make a button updating component dynamically in Vue?

vue.js

nuxt.js