이중 슬롯에서 props 처리

안녕하세요!

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

<!-- 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>

<template #iconRender="v">
        <EyeTwoTone v-if="v"></EyeTwoTone> <!-- 이것만 인식 -->
        <EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
</template>