敲除組件：將子組件作爲參數傳遞給父組件

Question

我們正在重構Knockout 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 IST傳遞給元素的小部件參數。

非常感謝

Answer 1

您可以使用component binding控制什麼確切的成分會在這個地方被渲染：

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

組件名稱，「購物推車」，在這種情況下，可以改變當前上下文對象的屬性，如elementType，其中包含要呈現的組件名稱。