以下案例：我有一個 API，用于輸出我的頁面的所有內容，以及它的結構等（為了更好地理解，對包含一種頁面構建器的 CMS 進行成像，作者可以在其中通過拖放來放置組件生成頁面內容，由該 api 傳遞給前端）。
api 輸出的結構如下所示：
{content: [
{component: hero, content: {...} },
{component: form, content: {...} },
...
]}
因此，要生成相關內容，我會考慮使用動態組件，例如：
<template v-for="item in content">
<component :is="item.component" />
</template>
但是，這樣做我會面臨一個問題，即我必須以某種方式將屬性資料添加到我的組件上，這（據我所知）在 Vue 檔案中沒有描述。所以現在我想知道如何將道具傳遞到動態組件上，這些組件具有完全不同的道具（英雄可能有影像，表單可能有輸入占位符等等） - 有什么想法嗎？？？
uj5u.com熱心網友回復：
現在有必要說明您使用的是哪個版本的 Vue。
使用 Vue 2 你可以這樣做：
Vue.component('FirstComponent', {
props: ['title', 'prop1_1'],
template: `
<div>
{{ title }}<br />
{{ prop1_1 }}
</div>
`
})
Vue.component('SecondComponent', {
props: ['title', 'prop2_1', 'prop2_2'],
template: `
<div>
{{ title }}<br />
{{ prop2_1 }}<br />
{{ prop2_1 }}
</div>
`
})
new Vue({
el: "#app",
data() {
return {
items: [
{
component: 'FirstComponent',
props: {
title: 'First component title',
prop1_1: 'this is prop 1_1'
},
},
{
component: 'SecondComponent',
props: {
title: 'Second component title',
prop2_1: 'this is prop 2_1',
prop2_2: 'this is prop 2_2',
},
},
]
}
},
template: `
<div>
<component
v-for="(item, idx) in items"
:key="idx"
:is="item.component"
v-bind="item.props"
></component>
</div>
`
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>uj5u.com熱心網友回復：
看看v-bind https://vuejs.org/v2/guide/components-props.html#Passing-the-Properties-of-an-Object（與 Vue 3 相同）。
假設您的 API 包括props每個組件的屬性，那么您將執行以下操作：
<component v-for="item in content" :is="item.component" v-bind="item.props"></component>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/402451.html
標籤：
上一篇：HTML/CSS中的替換文本