Vue 3 how to pass slots through multiple components

Question

I'm trying to create a huge table with specified cells that can be reused throughout the project.

I want to pass different cell components into my table component.

But I don't know how to pass a named slot through multiple child nodes.

I'm using Vue v3.2.45

I want to be able to use my named slot cell's slotProps

in App.vue Like I did with id and the named slot test

I created a playground here to make myself clear

// App.vue
<script setup lang="ts">
import { ref } from 'vue'
import { ITable } from './types.ts'
import Table from './Table.vue'

const table = ref<ITable>({
  tree: [
    { data: [{ value: '0' }, { value: '1' }, { value: '2' }, { value: '3' }] },
    { data: [{ value: '0' }, { value: '1' }, { value: '2' }, { value: '3' }] },
  ],
})
</script>

<template>
  <Table :table="table">
    <template #cell="{ cell }">
      Hello {{ cell.value }}
    </template>
    <template #test="{ id }">
      <div class="row">Row above is {{ id }}</div>
    </template>
  </Table>
</template>

// Table.vue
<template>
  <div class="table">
    <template v-for="(row, rowI) in table.tree" :key="rowI">
      <Row :row="row" />
      <slot name="test" :id="rowI" />
    </template>
  </div>
</template>

// Row.vue
<template>
  <div class="row">
    <div class="cell" v-for="(cell, cellI) in row.data" :key="cellI">
      <slot name="cell" :cell="cell" />
    </div>
  </div>
</template>

Answer 1

You can expose the cell slot in the Table component and use it in App.vue

<!-- Table.vue -->
<template>
  <div class="table">
    <template v-for="(row, rowI) in table.tree" :key="rowI">
      <Row :row="row">
        <template #cell="{ cell }">
          <slot name="cell" :cell="cell"></slot>
        </template>
      </Row>
      <slot name="test" :id="rowI" />
    </template>
  </div>
</template>