<p>我正在尝试使用指定的单元格创建一个可在整个项目中重复使用的巨大表格。</p><p>
我想将不同的单元格组件传递到我的表格组件中。</p><p>
但我不知道如何<strong>通过多个子节点</strong>传递一个命名槽。</p><p>
我正在使用 <strong>Vue v3.2.45</strong></p>
<p>我希望能够在 App.vue 中使用我的命名槽 <code>cell</code> 的 slotProps</p><p>
就像我对 <code>id</code> 和命名槽 <code>test</code></p> 所做的那样
<p>我在这里创建了一个游乐场来让自己清楚</p>
<pre class="brush:js;toolbar:false;">// 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>
</pre>
<pre class="brush:js;toolbar:false;">// 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>
</pre>
<pre class="brush:js;toolbar:false;">// 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>
</pre></p>
1
823
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
您可以在
Table组件中公开cell插槽，并在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>