如何分发儿童列表中插槽内的组件

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的实例

希望它可以帮助内容绑定。