Passing scoped slots through multiple components

Question

I have 2 components. One is a list component (list.vue). The other takes a list and wraps it with other features(searchandlist). Now, from the page.vue file I would like to call SearchAndList, giving it the list, and the render props. However, I cant get the dynamic data to show, only static.

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>

When using this, I get Hi listed out 3 times as exprected. However, when changing this to:

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

I do get "Duplicate presence of slot "default" found in the same render tree - this will likely cause render errors." in the console, however, even giving the default slot a name=list, the error is the same, but default is not list.

Im sure there is something simple that I am missing. Any guidance would be great.

EDIT:

I have a child component () that exposes an { item } to its parent (). However, I would like to access { item } in the grand-parent (page.vue).

Can you add the complete listings for your components? I can't quite make out what you are trying to do here. Is list-items the same as List.vue? — Bert

mathk mathk · Accepted Answer · 2018-02-18T21:22:14

There is 2 missing bit in your configuration.

Expose you item in the List.vue:

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

Then you need to bind the name in your SearchAndList.vue.

So try:

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

Passing scoped slots through multiple components

1 Answers