Vue 3 如何透過多個元件傳遞槽
P粉216203545
P粉216203545 2023-08-27 00:15:30
0
1
567
<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 } 從 'vue' import { ITable } from './types.ts' import Table from './Table.vue' const table = ref<ITable>({ tree: [ { data: [{ 值: '0' }, { value: '1' }, { value: '2' }, { value: '3' }] }, { data: [{ 值: '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>
P粉216203545
P粉216203545

全部回覆(1)
P粉644981029

您可以在 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>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板