我的情況
我有一堆要放入選項卡的自定義組件
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>
反復
uj5u.com熱心網友回復：
我認為您正在尋找的是動態組件 - 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 個組件需要像這樣顯示，因為你在模板中失去了一些可見性。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/432675.html