Vue 3 複数のコンポーネントにスロットを渡す方法

Question

<p>プロジェクト全体で再利用できる、指定されたセルを含む巨大なテーブルを作成しようとしています。 </p><p> さまざまなセルコンポーネントをテーブルコンポーネントに渡したいと考えています。 </p><p> しかし、複数の子ノードを介して名前付きスロットを渡す方法がわかりません。 </p><p> 私は <gt;Vue v3.2.45</strong></p> を使用しています。 <p>名前付きスロット <code>cell</code> の slotProps</p><p> を App.vue で使用できるようにしたいです <code>id</code> と名前付きスロット <code>test</code></p> でやったのと同じように。 <p>自分の気持ちをはっきりさせるために、ここに遊び場を作りました</p> <pre class="brush:js;toolbar:false;">// App.vue <スクリプトセットアップ lang="ts"> 'vue' から { ref } をインポートします './types.ts' から { ITable } をインポートします './Table.vue' からテーブルをインポート const table = ref<ITable>({ 木： [ { データ: [{ 値: '0' }, { 値: '1' }, { 値: '2' }, { 値: '3' }] }, { データ: [{ 値: '0' }, { 値: '1' }, { 値: '2' }, { 値: '3' }] }, ]、 }) </スクリプト> <テンプレート> <テーブル :table="テーブル"> <template #cell="{ cell }"> こんにちは {{ cell.value }} </テンプレート> <template #test="{ id }"> <div class="row">上の行は {{ id }}</div> です。 </テンプレート> </表> </テンプレート> </pre> <pre class="brush:js;toolbar:false;">// Table.vue <テンプレート> <div class="テーブル"> <template v-for="(row, rowI) in table.tree" :key="rowI"" <行 :row="行" /> <スロット名="テスト" :id="rowI" /> </テンプレート> </div> </テンプレート> </pre> <pre class="brush:js;toolbar:false;">// Row.vue <テンプレート> <div class="行"> <div class="cell" v-for="(cell, cellI) in row.data" :key="cellI""> <スロット名="セル" :cell="セル" /> </div> </div> </テンプレート> </pre></p>

Answer 1

Table コンポーネントの cell スロットを公開し、App.vue

で使用できます。 リーリー