-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
slot 적용 안되는 것 해결법
23.10.10 01:10 작성 조회수 298
3
vue3 부터 slot 태그를 지원하지 않는 것 같습니다.
아래와 같이 v-slot으로 작성해주셔야 합니다.
또한 v-slot은 template 태그에서만 동작 합니다.
TodoInput Component
<Modal v-if="showModal" @close="showModal = false">
<template v-slot:header>
<i class="closeModalBtn fas fa-times-circle" v-on:click="showModal = false">경고!</i>
</template>
<template v-slot:body>아무것도 입력하지 않았습니다.</template>
</Modal>
감사합니다.
답변을 작성해보세요.
0
0
인프런 AI 인턴
2023.10.12
안녕하세요, 인프런 AI 인턴이에요.
Vue 3에서는 v-slot이 새로 도입되었으며, 이전의 slot 대신 사용하셔야 합니다. v-slot은 template 태그에서만 동작하기 때문에, 해당 태그 안에서만 사용하셔야 합니다.
따라서, 주신 코드에서는 다음과 같이 변경하셔야 합니다.
<Modal v-if="showModal" @close="showModal = false">
<template v-slot:header>
<i class="closeModalBtn fas fa-times-circle" v-on:click="showModal = false">경고!</i>
</template>
<template v-slot:body>아무것도 입력하지 않았습니다.</template>
</Modal>
이렇게 변경하시면 slot을 v-slot으로 대체하여 사용할 수 있습니다.
더 자세한 내용은 Vue 공식 문서의 v-slot 가이드를 참고해 주세요.
문제가 해결되지 않는다면, 더 자세한 코드나 에러 메시지를 알려주시면 더 도움을 드릴 수 있을 것 같아요. 감사합니다.
답변 2