⚓ Vue Slot으로 테이블 구현

🚆 slot

slot은 컴퍼넌트를 추상화 시키기위해 사용되는것으로 보인다. 추상화 시킴으로써 재사용할 수 있다는 장점이 있다.

이번에는  slot을 사용하여 table을 구현하는 방법을 해보았다.

 

 

🚩 table thead slot으로 만들어보기

table의 thead를 구현해볼 것이다. table은 전역에서 사용하지만, thead,tbody만 내용이 다르다는 것이 있어서, thead,tbody를 추상화 해볼것이다.

//Slot.vue
<template>
    <table>
        <thead>
            <tr>
                <slot name="header"></slot>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</template>

<script>
    export default {};
</script>

<style></style>

위와 같이 "<slot name="header"></slot>" 이 부분을 추상화 시켜놓았다. 

아래코드는 구현에서 어떻게 구현했는지 보여주는 코드이다.

 

<Slot>
	<template #header>
		<th>No</th>
		<th>상품명</th>
		<th>가격</th>
	</template>
</Slot>

slot에서 선언한 name="header"를 구현부분에서는 위와 같이 #header로 구현하였고 #header 코드 안에 th에 들어가는 부분을 구현하였다. 

 

 

🌄 table tbody slot으로 만들기

tbody도 thead와 같이 추상화시킬 것이다.  먼저 부모한테서 데이터를 받을 수 있도록 props에 tlist를 선언한다.

그리고 tlist를 이용해 반복문을 돌릴것이다. slot은 반복문이 되지 않아 template으로 반복문을 돌렸다.

그리고 tr 밑에 slot을 선언하고, 부모에서 자식의 데이터를 사용할 수 있도록 :row="item"을 사용하였다.

사용방식은 :부모에서사용할변수="자식에서쓰이는 데이터"  사용하면 된다.

<template>
	<table>
		<thead>
			<tr>
				<slot name="header"></slot>
			</tr>
		</thead>
		<tbody>
			<template v-for="(item, index) in tlist" :key="'item' + index">
				<tr>
					<slot name="list" :row="item"></slot>
				</tr>
			</template>
		</tbody>
	</table>
</template>

<script>
export default {
	props: {
		tlist: {
			type: Array,
			default() {
				return [];
			},
		},
	},
};
</script>

<style></style>

 

아래코드는 구현 부분이다.

tbody의 slot name을 list으로 만들었고, 자식의 컴퍼넌트 데이터를 부모에서 쓸 수 있도록 #list="{ row }"비구조화할당을 통해 쓸 수 있도록 만들었다.

<template>
    <Slot :tlist="tableBody">
        .
        .
        .
        <template #list="{ row }">
            <td>{{ row.item1 }}</td>
            <td>{{ row.item2 }}</td>
            <td>{{ row.item3 }}</td>
        </template>
    </Slot>
</template>

<script>
	setup() {
    	const tableBody = ref([
        	{item1:1, item2:2,item3:3}
        ]);
        
        return{
        	tableBody
        }
    }
</script>

 

 

🚉 사용하고 난 후기

아직 굉장히 낮은 단계의 구현이라 많이 부족한 점도 많으나, slot을 통해 추상화시켜서 컴퍼넌트를 재사용하게 했다는 장점은 확실히 느꼈다.