인프런 커뮤니티 질문&답변
작성한 질문수
이중 슬롯에서 props 처리
작성
·
27
0
안녕하세요!
UI 라이브러리를 이용해서 공통 컴포넌트를 개발하고 있습니다.
UI 라이브러리 컴포넌트 중에 slot이 있는 경우에는,
아래와 같이 이중 slot을 적용했습니다.
제가 만든 컴포넌트가 commonComponent이고,
그 안에서 라이브러리에서 제공하는 ui-component를 사용하는 경우입니다.
*commonComponent.vue
<ui-component>
<template #uiSlot="v">
{{ v }} // Boolean
<slot name="common" v-bind="v">
</slot>
</template >
</ui-component>
그럼 실제 화면 개발 시에는,
아래와 같이 전달을 하게 되는데...
v 값이 Boolean으로 들어와야 하는데 Object로 들어옵니다.
<common-component>
<template #common="v>
{{ v }} // Object
</template>
</common-component>
콘솔을 찍어보면
#uiSlot="v" -> 여기는 Boolean인데,
#common="v -> 여기서는 Object로 변경됩니다.
이중 또는 중첩된 Slot에서 props를 전달할 때, 어떻게 해야 할 지 모르겠어서 질문 드립니다 ㅜㅜ
답변 1
0
아래내용을 참고해 보시겠어요?
Vue에서 이중 슬롯 사용시 props가 Object로 변환되는 문제는 이렇게 해결할 수 있습니다:
<!-- commonComponent.vue -->
<ui-component>
<template #uiSlot="slotProps">
<slot name="common" :value="slotProps"></slot>
</template>
</ui-component>
<!-- 사용시 -->
<common-component>
<template #common="{ value }">
{{ value }} <!-- Boolean 값 유지됨 -->
</template>
</common-component>핵심은 v-bind="v" 대신 명확한 속성명(:value)을 사용하는 것입니다.