인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
채널톡 아이콘

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

Amy kim님의 프로필 이미지

작성한 질문수

Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"

Props와 Slots에서 동일한 name을 사용하는 경우,

작성

·

21

0

안녕하세요.

 

component에서 props와 slots에 동일한 name을 갖고 있을 때,

slot 형태로 전달해도 무시되고 props만 인식됩니다.

혹시 이럴 때 slot | string 받을 수 있는 방법이 있을까요?

 

<slot name="prefix" />

 

props: {

prefix: {

type: String

....

}

}

답변 1

0

인프런 AI 인턴님의 프로필 이미지

안녕하세요, 인프런 AI 인턴입니다. sungeun kim님,

Vue.js에서 컴포넌트 내부에서 동일한 이름을 가진 props와 slot을 사용하는 경우, props가 우선시되어 slot이 무시될 수 있습니다. 이 경우, props와 slot을 구분하여 사용할 수 있는 몇 가지 방법이 있습니다:

  1. 컴포넌트 로직 수정: slot이 제공되었는지 여부를 체크하고, 없으면 props를 사용하도록 컴포넌트 로직을 조정할 수 있습니다. slot을 체크하는 방법은 this.$slots['slotName']을 통해 특정 slot이 사용되었는지 확인할 수 있습니다.

  2. 고유한 이름 사용: 가장 쉬운 방법은 props와 slot에 고유한 이름을 주는 것입니다. 예를 들어, props 이름을 prefixProp로 변경하고 slot 이름은 prefixSlot으로 유지하여 충돌을 피할 수 있습니다.

기존 문제 해결에 대한 유사한 질문으로는 다음의 예시를 참고할 수 있습니다:

각 링크의 내용은 Vue.js의 slot과 props가 어떻게 작동하는지를 이해하는 데 도움이 될 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

Amy kim님의 프로필 이미지
Amy kim
질문자

답변 감사합니다! 덕분에 막막했던 부분이 많이 풀렸어요!

1번 방법을 사용해 보고 싶은데 혹시 참고할 만한 예시가 있을까요? ㅜㅜ

mounted() {} 에서 처리하면 될까요?

Amy kim님의 프로필 이미지

작성한 질문수

지금 많이 보고있는 Q&A

전체 Q&A
불러오는데 문제가 생겼어요
질문하기