Vue+Vuetify+Nuxt - 在 v-for 循环中渲染组件列表

Question

我的情况

我有一堆自定义组件要放入选项卡

import UserTable from '...'
import User from '...'
.
.
components: { 
  UserTable, 
  User 
}

data () { 
  return { 
    listComponents: [ UserTable, User] 
  }
}

我想做什么

类似下面的内容

<v-tab-item v-for="i in listComponents">
  <slots item:i> // or similar
</v-tab-item>

在html部分迭代导入组件

目的

能够跳过复制粘贴

<v-tab-item>
  <component_number_1>
</v-tab-item>

反复

Answer 1

我认为您正在寻找的是动态组件 - Docs Vue@2 Docs Vue@3

您的列表应包含字符串格式的组件名称，如下所示：

components: { 
  UserTable, 
  User 
},
data () { 
  return { 
    listComponents: ['UserTable', 'User']
  }
}

<v-tab-item v-for="component in listComponents">
  <component v-bind:is="component"></component>
</v-tab-item>

我个人的看法：这看起来有点矫枉过正，除非你有超过 5 个组件需要像这样显示，因为你在模板中失去了一些使用的可见性。

Vue+Vuetify+Nuxt - 在 v-for 循环中渲染组件列表

Vue+Vuetify+Nuxt - Render a list of components in a v-for loop

vue.js

nuxt.js

vuetify.js