淘汰組件：將子組件作為參數傳遞給父組件

Question

我們正在重構淘汰賽SPA。 改進之一是在可能的情況下使組件更通用。 例如，我們需要一個“多態” /通用<elements-widget>來呈現元素列表。 取決於列表的類型，子組件的類型可能有所不同。

當前應用的示例 ：

我們有一個“人員頁面”：

<persons-page>
  <persons-widget> <persons-widget>
</persons-page>

“小部件”：

<div class="grid" data-bind="foreach: elements">
    <person-widget params="element:$rawData"></persons-widget>
</div>

相反，我們想在“人員頁面”上使用通用組件

<elements-widget params="elements:elements, elemComponent:'person-widget'">
</elements-widget>

通用組件的模板應如下所示：

<div class="grid" data-bind="foreach: elements">
    <elemComponent> params="element:$rawData"></elemComponent>
</div>

其中elemComponent包含傳遞給elements-widget的參數。

非常感謝

Answer 1

您可以使用組件綁定來控制在此位置將渲染的確切組件：

<div data-bind='component: {
    name: "shopping-cart",
    params: { mode: "detailed-list", items: productsList }
}'></div>

在這種情況下，組件名稱“購物車”可以更改為當前上下文對象的屬性，例如elementType包含要呈現的組件名稱。