Vue 3 여러 구성 요소를 통해 슬롯을 전달하는 방법

Question

<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 <스크립트 설정 lang="ts"> 'vue'에서 { 참조 } 가져오기 './types.ts'에서 { ITable } 가져오기 './Table.vue'에서 테이블 가져오기 const 테이블 = ref<ITable>({ 나무: [ { 데이터: [{ 값: '0' }, { 값: '1' }, { 값: '2' }, { 값: '3' }] }, { 데이터: [{ 값: '0' }, { 값: '1' }, { 값: '2' }, { 값: '3' }] }, ], }) </스크립트> <템플릿> <테이블 :table="테이블"> <템플릿 #cell="{ 셀 }"> 안녕하세요, {{ cell.value }} </템플릿> <템플릿 #test="{ id }"> <div class="row">위 행은 {{ id }}</div> </템플릿> </표> </템플릿> </pre> <pre class="brush:js;toolbar:false;">// Table.vue <템플릿> <div 클래스="테이블"> <table.tree의 template v-for="(row, rowI)" :key="rowI"> <행 :row="행" <슬롯 이름="test":id="rowI" </템플릿> </div> </템플릿> </pre> <pre class="brush:js;toolbar:false;">// Row.vue <템플릿> <div 클래스="행"> <div class="cell" v-for="(cell, cellI) in row.data" :key="cellI"> <슬롯 이름="cell" :cell="cell" /> </div> </div> </템플릿>

Answer 1

다음에서 사용할 수 있습니다. Table 组件中公开 cell 插槽，并在 App.vue

으아악