Vue 3 複数のコンポーネントにスロットを渡す方法
<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>
