如何分發兒童列表中插槽內的組件

Question

我有一個接收項目列表的組件。這些項目中的每一個都將是主要內容中的一個子組件。每個子組件都有一個插槽，我需要分發內容。

如何將每個項目的內容（名稱）分配到正確的插槽？

根應用：

<div id="app"> 
    <test-list :items="items"></test-list> 
</div> 

var app = new Vue({ 
    el: "#app", 
    data: { 
    items: [ 
     {id: 1, name: "item 1"}, 
     {id: 2, name: "item 2"}, 
     {id: 3, name: "item 3"}, 
     {id: 4, name: "item 4"}, 
     {id: 5, name: "item 5"}, 
    ] 
    } 
}); 

主要成份：

Vue.component('test-list', { 
    template: '#test-list', 
    props: { 
    items: [] 
    }, 
}); 

<script id='test-list' type='x-template'> 
    <ul class="list-group"> 
    <test-item v-for="item in items" :id="item.id" :name="item.name"></test-item> 
    </ul> 
</script> 

子組件：

Vue.component('test-item', { 
    template: '#test-item', 
    props: { 
    id: 0, 
    name: "" 
    } 
}); 

<script id='test-item' type='x-template'> 
    <li class="list-group-item"> 
    <slot>default text {{name}}</slot> 
    </li> 
</script> 

，我能夠做的最好的是在所有發佈相同內容物品：JSFiddle here

有什麼建議嗎？謝謝！

Answer 1

如果我明白了，this就是你想要的。你必須使用named slots，以這樣的方式

根應用

<test-list :items="items">  
</test-list> 

主要成分

<ul class="list-group"> 
    <test-item v-for="item in items" :id="item.id" :name="item.name"> 
     <span :slot="item.name"></span> 
    </test-item> 
    </ul> 

子組件

<li class="list-group-item"> 
    <slot :name="name">default text {{name}}</slot> 
    </li> 

注意事項：

1. slot組件包含在子項中，其名稱屬性爲
2. 插槽中的元素放置在具有slot屬性的父項中。
3. 兩個屬性有一個v-on指令（我用的是:簡寫），所以您可以在Vue的實例

希望它可以幫助內容綁定。