작성
·
21
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. sungeun kim님,
Vue.js에서 컴포넌트 내부에서 동일한 이름을 가진 props와 slot을 사용하는 경우, props가 우선시되어 slot이 무시될 수 있습니다. 이 경우, props와 slot을 구분하여 사용할 수 있는 몇 가지 방법이 있습니다:
컴포넌트 로직 수정: slot이 제공되었는지 여부를 체크하고, 없으면 props를 사용하도록 컴포넌트 로직을 조정할 수 있습니다. slot을 체크하는 방법은 this.$slots['slotName']
을 통해 특정 slot이 사용되었는지 확인할 수 있습니다.
고유한 이름 사용: 가장 쉬운 방법은 props와 slot에 고유한 이름을 주는 것입니다. 예를 들어, props 이름을 prefixProp
로 변경하고 slot 이름은 prefixSlot
으로 유지하여 충돌을 피할 수 있습니다.
기존 문제 해결에 대한 유사한 질문으로는 다음의 예시를 참고할 수 있습니다:
각 링크의 내용은 Vue.js의 slot과 props가 어떻게 작동하는지를 이해하는 데 도움이 될 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
답변 감사합니다! 덕분에 막막했던 부분이 많이 풀렸어요!
1번 방법을 사용해 보고 싶은데 혹시 참고할 만한 예시가 있을까요? ㅜㅜ
mounted() {} 에서 처리하면 될까요?