slot 적용 안되는 것 해결법

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

트렌지션 소개 및 구현

해결된 질문

작성

433

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>

감사합니다.

javascript vue.js es6 vuex

답변 2

장기효(캡틴판교)

지식공유자

안녕하세요, 다른 분들을 위해서 적어주셔서 감사합니다 :) 슬롯에 대한 자세한 내용은 아래 사이트 참고해 보세요 :)

https://joshua1988.github.io/vue-camp/reuse/v-slot.html

인프런 AI 인턴

안녕하세요, 인프런 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 가이드를 참고해 주세요.

문제가 해결되지 않는다면, 더 자세한 코드나 에러 메시지를 알려주시면 더 도움을 드릴 수 있을 것 같아요. 감사합니다.

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

slot 적용 안되는 것 해결법

TodoInput Component