Vue.js는 강력한 컴포넌트 기반 프레임워크로, 부모 컴포넌트와 자식 컴포넌트 간에 데이터와 동작을 전달하고 조작하는 데 다양한 기능을 제공합니다. 이 중에서도 v-slot 디렉티브는 슬롯(slot)을 통해 데이터를 자식 컴포넌트로 전달하고 렌더링하는 데 특히 유용합니다. 이 블로그 포스트에서는 v-slot 디렉티브의 사용법과 예제를 살펴보겠습니다.
v-slot 디렉티브란?
v-slot 디렉티브는 Vue.js에서 컴포넌트 간 데이터 전달과 렌더링을 위해 사용되는 디렉티브 중 하나입니다. 부모 컴포넌트에서 자식 컴포넌트로 HTML 요소나 컴포넌트를 전달하고, 자식 컴포넌트에서 이를 받아서 렌더링하는 데 활용됩니다. v-slot은 주로 부모 컴포넌트에서 자식 컴포넌트로 전달되는 컨텐츠를 커스터마이징하거나 동적으로 생성하는 데 사용됩니다.
기본 사용법
v-slot을 사용하여 데이터를 자식 컴포넌트로 전달하고 렌더링하는 기본적인 사용법을 살펴보겠습니다.
부모 컴포넌트
<template>
<div>
<!-- 자식 컴포넌트에 슬롯을 통해 데이터 전달 -->
<ChildComponent>
<!-- 슬롯 정의 -->
<template v-slot:default="slotProps">
<p>{{ slotProps.message }}</p>
<button @click="slotProps.updateMessage">메시지 업데이트</button>
</template>
</ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
};
</script>
자식 컴포넌트
<template>
<div>
<!-- 부모 컴포넌트에서 전달된 슬롯 사용 -->
<slot></slot>
</div>
</template>
<script>
export default {
data() {
return {
message: '안녕하세요!',
};
},
methods: {
updateMessage() {
this.message = '슬롯을 통해 업데이트된 메시지입니다.';
},
},
};
</script>
위의 예제에서는 다음과 같은 주요 단계를 수행합니다:
- 부모 컴포넌트에서 ChildComponent를 호출하면서 v-slot 디렉티브를 사용하여 슬롯을 정의합니다.
- 자식 컴포넌트인 ChildComponent에서는 슬롯을 <slot></slot>으로 사용하여 부모 컴포넌트에서 전달된 내용을 렌더링합니다.
- 슬롯에는 slotProps라는 변수를 사용하여 부모 컴포넌트에서 전달된 데이터와 메소드에 접근합니다.
슬롯을 통한 데이터 전달과 상호작용
v-slot 디렉티브를 사용하면 부모 컴포넌트와 자식 컴포넌트 사이의 데이터 전달과 상호작용을 쉽게 구현할 수 있습니다. 위의 예제에서는 메시지를 전달하고 메시지를 업데이트하는 예제를 살펴보았습니다.
데이터 추가하기
슬롯을 사용하여 데이터를 자식 컴포넌트로 전달할 때, 다양한 데이터를 추가할 수 있습니다. 이 예제에서는 이름과 이메일을 자식 컴포넌트로 전달하겠습니다.
<template>
<div>
<!-- 자식 컴포넌트에 슬롯을 통해 데이터 전달 -->
<ChildComponent>
<!-- 슬롯 정의 -->
<template v-slot:default="slotProps">
<p>이름: {{ slotProps.name }}</p>
<p>이메일: {{ slotProps.email }}</p>
</template>
</ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
};
</script>
자식 컴포넌트
<template>
<div>
<!-- 부모 컴포넌트에서 전달된 슬롯 사용 -->
<slot></slot>
</div>
</template>
<script>
export default {
props: ['name', 'email'],
};
</script>
부모 컴포넌트에서 ChildComponent를 호출할 때, v-slot을 사용하여 name과 email 속성을 전달합니다. 자식 컴포넌트에서는 이러한 데이터를 props를 통해 받아와서 렌더링합니다