Question

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

当使用它时，我得到了Hi列出3次表示。但是，将此更改为：

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

我得到＆＃34;重复出现插槽＆＃34;默认＆＃34;在同一个渲染树中找到 - 这可能会导致渲染错误。＆＃34;但是，在控制台中，即使给默认插槽一个名称=列表，错误也是一样，但默认不是列表。

我确信有一些我想念的简单。任何指导都会很棒。

编辑：

我有一个子组件（），它将{item}暴露给它的父（）。但是，我想访问grand-parent（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>

通过多个组件传递范围的插槽

1 个答案: