我想顯示我匯入到我的 XYZ 視圖中的所有組件名稱（并在 中顯示cards）。我需要以某種方式將組件名稱存盤在data屬性中，以便template稍后回圈遍歷它。我試圖components從data使用的屬性中參考屬性，this.components但它不起作用。我不想用names: ['A', 'B', 'C']在data通過它和回圈，它不是即使這個解決方案工程智能和高效的方式。那么如何獲取組件名稱呢？
<template>
<v-container fluid>
<v-row dense>
<v-col
v-for="(comp, n) in names"
:key="n"
:cols="n === 0 ? 2 : 10"
>
<v-card outlined tile>
<component :is="comp"></component>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
import A from '../views/A.vue';
import B from '../views/B.vue';
import C from '../views/C.vue';
export default {
name: 'XYZ',
data() {
return {
names: this.components,
// names: ['A', 'B', 'C'] // I don't want to make it this way even though it works fine
}
},
components: {
A,
B,
C
},
};
</script>
uj5u.com熱心網友回復：
使用this.$options.components-檔案
const componentA = {
name: 'compA',
template: `<h3>Hi from compA</h3>`
}
const componentB = {
name: 'compB',
template: `<h3>Hi from compB</h3>`
}
new Vue({
el: "#app",
components: {
componentA,
componentB
},
data() {
return {
// do this if you want names by which the components are (locally) registered
// this is much more usefull as you can use these names with <component :is="name">
componentNames1: Object.keys(this.$options.components),
// do this if you want names defined in components definition
componentNames2: Object.entries(this.$options.components).map(entry => entry[1].name)
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>
<div id="app">
<div>1: {{ componentNames1 }}</div>
<div>2: {{ componentNames2 }}</div>
<hr>
<div v-for="name in componentNames1">
<component :is="name" :key="name"></component>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/370451.html
標籤：Vue.js
下一篇：如何從API獲取隨機資料