<p>Saya cuba mencipta jadual besar dengan sel tertentu yang boleh digunakan semula sepanjang projek. </p><p> Saya mahu menghantar komponen sel yang berbeza ke dalam komponen jadual saya. </p><p> Tetapi saya tidak tahu cara <strong>melepasi slot bernama melalui berbilang nod anak</strong>. </p><p> Saya menggunakan <strong>Vue v3.2.45</strong></p> <p>Saya mahu boleh menggunakan slot bernama <kod>sel</code>s slotProps</p><p> dalam App.vue Seperti yang saya lakukan dengan <code>id</code> dan slot bernama <code>test</code></p> <p>Saya mencipta taman permainan di sini untuk membuat diri saya jelas</p> <pre class="brush:js;toolbar:false;">// App.vue <penyiapan skrip lang="ts"> import { ref } daripada 'vue' import { ITable } daripada './types.ts' import Jadual daripada './Table.vue' const table = ref<ITable>({ pokok: [ { data: [{ value: '0' }, { value: '1' }, { value: '2' }, { value: '3' }] }, { data: [{ value: '0' }, { value: '1' }, { value: '2' }, { value: '3' }] }, ], }) </skrip> <template> <Jadual :table="jadual"> <template #cell="{ sel }"> Helo {{ cell.value }} </template> <template #test="{ id }"> <div class="row">Baris di atas ialah {{ id }}</div> </template> </Jadual> </template> </pra> <pre class="brush:js;toolbar:false;">// Table.vue <template> <div class="jadual"> <template v-for="(baris, barisI) dalam jadual.pokok" <Baris :row="baris" <nama slot="ujian" :id="barisI" </template> </div> </template> </pra> <pre class="brush:js;toolbar:false;">// Row.vue <template> <div class="baris"> <kelas div="sel"v-untuk="(sel, selI) dalam baris.data" <nama slot="sel" :sel="sel" </div> </div> </template> </pra></p>

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