1

我有一个接收项目列表的组件。这些项目中的每一个都将是主要项目中的一个子组件。每个子组件都有一个插槽，我需要在其中分发内容。

如何将每个项目的内容（名称）分配到正确的插槽？

根应用程序：

<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

有任何想法吗？谢谢！

4

1 回答 1

1

如果我做对了，这就是你想要的。您必须以这种方式使用命名插槽：

根应用

<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指令（我使用了:简写），所以你可以绑定你的 Vue 实例的内容

希望能帮助到你。

于 2016-06-14T15:56:10.663 回答