vuejs - pass scope templates down multiple child-levels

Question

I'm building a table with vue, and I use slots for customized formatting. F.e. the table (which is a component), uses a thead-component, where each th is a scoped/named-slot. Specifing a template for the slot only works from parent to child though (or so it seems - vm.$scopedSlots is empty for the thead-component).

This is the outline of what it looks like:

// in index.html
<my-table :data="data">
  <template name="col1-header" props="column">
    <th style="colour: blue;">{{ column.name }}</th>
  </template>
</my-table

// in my-table component
<template>
  <table>
    <my-thead :columns="columns">
    </my-thead>
    // tr: v-for over data
  </table>
</template>

// in my-thead component
<template>
  <thead>
    <tr>
      <slot :name="column.name + '-header'" :item="column" v-for="column in columns">
        <th>{{ column.name }}</th>
      </slot>
    </tr>
  </thead
</template>

Using the template has no use, since it only seems to apply to my-table rather than my-thead. The only way to use the slots defined in my-thead is if I add templates in the my-table-component, but I need to specify them outside of the component.

Is there a way to pass the template that gets specified when using my-table to the my-thead component? As I already mentioned, I tried using vm.$scopedSlots, but this property is read-only and can't be set on the my-thead component. I can access the $scopedSlots of the parent vm though. I also tried using slot and template in the my-table-component to somehow pass on the template to the child, but that didn't work either.

Johannes Johannes · Accepted Answer · 2017-03-28T14:02:37

I had to create a github issue for this problem. As per the comments, there are multiple ways of dealing with this:

Pass the slots to the child, by using a render function, as shown below, and setting the scopedSlot property, or by using a property to pass the scopedSlots, as shown here. Or use the in version 2.2.0 added provide/inject mechanisms to set the scopedSlots (which I haven't tried yet).

render (h) {
  return h('child', {
    scopedSlots: this.$scopedSlots
  })
}

vuejs - pass scope templates down multiple child-levels

1 Answers