Vue 3 여러 구성 요소를 통해 슬롯을 전달하는 방법
<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>
</템플릿>
