작성
·
406
1
안녕하세요 Vue3 쪽에서 사용 중이긴 한데 v-slot 관련해서 궁금한 점이 있습니다.
childComponent.vue
<div>
<slot name="child"></slot>
</div>
parentsComponent.vue
<children-component>
<template v-slot:child>
...
</template>
<slot name="parent"></slot>
</children-component>
topComponent.vue
<parent-component>
<template v-slot:parent>
...
<template v-slot:child>
...
</template>
</template>
</parent-component>
위와 같이 topComponent에서
parentsComponent.vue의 parent slot을 통해 childComponent.vue의 child slot으로 접근하고 싶은데 위처럼 코드를 작성하면 오류가 발생하더라구요.
topComponent에서 parentsComponent의 슬롯을 통해 childComponent 슬롯으로 접근하려면 어떻게 해야 할까요?
답변 2
0
0
안녕하세요, 인프런 AI 인턴입니다.
kjkang님의 Vue.js 관련 질문에 대한 답변을 드리겠습니다.
Vue.js에서는 슬롯을 중첩하여 사용하는 것이 가능합니다. v-slot을 사용할 때 중요한 것은 올바른 범위와 상하 구조를 지키는 것입니다. 다중 슬롯에서 특정 슬롯에 접근하려 할 때 상위 컴포넌트에서 하위 컴포넌트의 슬롯을 타겟팅하여 사용할 수 있습니다. 그러나 v-slot
을 중첩하여 바로 내부 슬롯을 타겟팅하는 것은 가능하지 않습니다. 각각의 슬롯은 자신이 속한 컴포넌트의 바로 하위 레벨에서만 접근할 수 있습니다.
예시에서 topComponent
는 childComponent
의 슬롯에 직접 접근하는 것이 아니라, parent-component
에 정의된 슬롯을 사용하여 해당 슬롯을 통해 데이터를 전달해야 합니다. 이를 사용하기 위해서는 parent-component
에 child-component
의 슬롯에 대한 템플릿을 제공하고, topComponent
또한 parent-component
의 슬롯을 통해 필요한 데이터를 전달하면 됩니다.
올바른 사용 예는 다음과 같습니다.
childComponent.vue
<div>
<slot name="child"></slot>
</div>
parentsComponent.vue
<children-component>
<template v-slot:child>
<!-- 여기서 TopComponent로부터 어떤 내용을 받는다면 그 내용을 표시함 -->
<slot name="parent"></slot>
</template>
</children-component>
topComponent.vue
<parent-component>
<template v-slot:parent>
<!-- parentsComponent.vue의 child 슬롯에 표시할 내용을 전달합니다. -->
내용...
</template>
</parent-component>
이렇게, 각 컴포넌트는 자신의 슬롯을 통해 필요한 내용을 전달하고, 각각의 슬롯 태그(template
) 내부에 또 다른 슬롯을 정의하여 중첩적으로 사용할 수 있습니다. 상위 컴포넌트의 v-slot
은 하위 컴포넌트에서 정의한 위치에 내용을 전달하는 역할만 하며, 직접적인 중첩 접근은 불가능합니다.
Vue.js의 공식 문서나 커뮤니티에서 추가적인 정보를 찾아볼 수 있으며, 복잡한 슬롯 구조가 필요하다면 구조를 단순화하거나 다른 방식을 고려해 보는 것도 좋을 것입니다.