slot 적용 안되는 것 해결법
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>
감사합니다.
답변 2
0
안녕하세요, 다른 분들을 위해서 적어주셔서 감사합니다 :) 슬롯에 대한 자세한 내용은 아래 사이트 참고해 보세요 :)
0
안녕하세요, 인프런 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 가이드를 참고해 주세요.
문제가 해결되지 않는다면, 더 자세한 코드나 에러 메시지를 알려주시면 더 도움을 드릴 수 있을 것 같아요. 감사합니다.
Chrome 개발자 모드 확장이 안됨
0
256
1
깃 권한 요청드립니다
0
118
1
vue.js 중급 리포지토리 권한 관련
0
118
1
vuex + axios 질문 있습니다!
1
198
2
깃 권한 요청드립니다!
0
161
1
강의 깃주소 문의
0
144
1
router-view에 props를 어떻게 넘길 수 있나요?
1
279
2
Vue가 인식되지 않는 현상
0
205
1
기초강좌는 어디있나요?
1
190
2
App.vue가 필요한 이유
0
192
1
getter가 정의되어 있지 않아 오류가 발생합니다.
1
253
1
뷰 라이프사이클
1
187
1
TSLint 말고 TSLint Vue 설치해도 되나요?
1
368
3
로컬 스토리지는 어디에 있나요?
1
279
1
vuex 실행시 새로고침해야지만 리스트에 나타나는 현상
1
387
2
export default 관련한 질문
0
354
2
깃허브 vue-todo 접근불가에 따른 확인요청
1
354
2
깃허브에 문제있는것 같습니다.
1
273
2
인프런 강의 재생 화면 구성 변경 문의드립니다
1
303
2
addTodo Helper 함수 적용
1
243
1
vuex 헬퍼 전역 설정
1
245
2
github 권한요청드립니다.
1
258
2
이벤트 위치에 대한 궁금증 입니다.
1
223
2
구조 차이에 대한 문의
1
345
2