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：

root app

<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>

注意事项：

slot组件包含在子项中，名称属性为
插槽中的元素放置在具有slot属性的父级中。
这两个属性都有v-on指令（我使用了:简写），因此您可以绑定Vue实例的内容

希望它有所帮助。

如何在子列表中的插槽内分发组件

1 个答案: