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

【问题标题】：Passing scoped slots through multiple components通过多个组件传递作用域插槽
【发布时间】：2018-07-29 02:19:07
【问题描述】：

我有 2 个组件。一种是列表组件（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>

当使用这个时，我得到了 3 次按预期列出的 Hi。但是，将其更改为：

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

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

我确定我缺少一些简单的东西。任何指导都会很棒。

编辑：

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

【问题讨论】：

您可以为您的组件添加完整的列表吗？我无法完全弄清楚您在这里要做什么。 list-items 和 List.vue 一样吗？
@Bert 是的，抱歉，我知道这可能会造成混淆。

标签： vue.js vuejs2

【解决方案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>

【讨论】：