Vue 3 bagaimana untuk melepasi slot melalui berbilang komponen
P粉216203545
2023-08-27 00:15:30
<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>
Anda boleh menggunakannya dalam
Table
组件中公开cell
插槽,并在App.vue