인프런 커뮤니티 질문&답변

안녕하세요!

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를 전달할 때, 어떻게 해야 할 지 모르겠어서 질문 드립니다 ㅜㅜ