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