Vue 3 bagaimana untuk melepasi slot melalui berbilang komponen

Question

Saya cuba mencipta jadual besar dengan sel tertentu yang boleh digunakan semula sepanjang projek.

Saya mahu menghantar komponen sel yang berbeza ke dalam komponen jadual saya.

Tetapi saya tidak tahu cara melepasi slot bernama melalui berbilang nod anak.

Saya menggunakan Vue v3.2.45

Saya mahu boleh menggunakan slot bernama sels slotProps

dalam App.vue Seperti yang saya lakukan dengan id dan slot bernama test

Saya mencipta taman permainan di sini untuk membuat diri saya jelas

// App.vue

import { ref } daripada 'vue'
import { ITable } daripada './types.ts'
import Jadual daripada './Table.vue'

const table = ref({
  pokok: [
    { data: [{ value: '0' }, { value: '1' }, { value: '2' }, { value: '3' }] },
    { data: [{ value: '0' }, { value: '1' }, { value: '2' }, { value: '3' }] },
  ],
})




// Table.vue

Answer 1

Anda boleh menggunakannya dalam 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>