通过多个组件传递作用域插槽

Question

我有两个组件。一个是列表组件(list.vue)。另一个是获取列表并将其与其他功能(Searchandlist)包装在一起。现在，我想从page.vue文件中调用SearchAndList，给它一个列表和渲染属性。但是，我不能显示动态数据，只能显示静态数据。

ListItems.vue

<span>
 <div v-for="item in items" :key="item.id">
 <slot v-bind="item"></slot>
</div>

SearchAndList.vue

<div class="clients-list">
    <div class="table-responsive">
      <table class="table table-striped table-hover">
        <list-items :items="items">
            <slot name="row"></slot>
        </list-items>
      </table>
    </div>
  </div>

page.vue

    <template>
<search-and-list :items="items">
  <tr slot="row">
    Hi
  </tr>
</search-and-list>

</template>

<script>
import SearchAndList from '../components/base/SearchAndList'


export default {
  components: {
    SearchAndList
  },
  data() {
    return {
      items: [
        { id: 10, name: 'Marc' },
        { id: 11, name: 'Bob' },
        { id: 12, name: 'George' }
      ]
    }
  }

}
</script>

在使用它时，我将Hi列出来3次。但是，在将其更改为：

<search-and-list :items="items">
 <tr slot="row" slot-scope="item">
  {{ item.name}}
 </tr>
</search-and-list>

在相同的渲染树中，我确实得到了“重复存在插槽”默认值“-这可能会导致渲染错误。”然而，在控制台中，即使给默认插槽一个列表，错误也是相同的，但默认不是name=list。

我确信我遗漏了一些简单的东西。任何指导都是很棒的。

编辑：

我有一个子组件()，它将{ item }公开给它的父组件()。但是，我想访问祖父母(page.vue)中的{ item }。

Answer 1

您的配置中缺少2位。

在List.vue中显示您的项目

<span>
   <div v-for="item in items" :key="item.id">
   <slot :item="item"></slot>
</div>

然后，您需要在SearchAndList.vue中绑定该名称。

所以试试吧：

<div class="clients-list">
<div class="table-responsive">
  <table class="table table-striped table-hover">
    <list-items :items="items">
        <slot scope-slot="{ item }" :name="item.name"></slot>
    </list-items>
  </table>
</div>

​