javascript - 如何在子列表的插槽内分配组件

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 组件包含在子组件中，并带有 name 属性
2. 要放入槽中的元素通过 slot 属性放置在父元素中。
3. 两个属性都有一个 v-on 指令(我使用了 : 简写)，因此您可以绑定(bind) Vue 实例的内容

希望有帮助。