Props와 Slots에서 동일한 name을 사용하는 경우,
62
작성한 질문수 4
안녕하세요.
component에서 props와 slots에 동일한 name을 갖고 있을 때,
slot 형태로 전달해도 무시되고 props만 인식됩니다.
혹시 이럴 때 slot | string 받을 수 있는 방법이 있을까요?
<slot name="prefix" />
props: {
prefix: {
type: String
....
}
}
답변 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가 어떻게 작동하는지를 이해하는 데 도움이 될 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
0
답변 감사합니다! 덕분에 막막했던 부분이 많이 풀렸어요!
1번 방법을 사용해 보고 싶은데 혹시 참고할 만한 예시가 있을까요? ㅜㅜ
mounted() {} 에서 처리하면 될까요?
npm init vue@3.1.9
0
39
2
크롭 웹스토어 vue devtools 설치 관련
0
40
1
snippets 작성하는 부분 설명이 있었나요?
0
48
2
computed 의 set 함수를 통해 const 변수에 값을 담는 부분
0
52
2
소스 공유 어디서 해야하는지 궁금합니다
0
60
2
component 등록과 사용
0
58
2
강의교안
0
56
2
eslint 룰 관련 질문이 있습니다.
0
64
2
npm init -y 명령어 실행에 관한 질문
0
154
2
volar 가 마켓플레이스에 검색되지 않아 vue(official)을 설치했습니다.
0
168
2
깊은 감시자 질문
0
88
2
정리된 내용
0
154
2
화면이 왜 이렇게 뜨는걸까요?
0
186
2
왜 다르게 뜰까요..?ㅠㅠ
0
155
2
npm init vue , npm create vue@latest 명령 오류
0
294
2
강의를 듣다보니 궁금한 점 질문드립니다.
0
141
2
watch강의 질문
0
153
1
강의 듣다가 질문드립니다.
0
119
1
이벤트 처리 부분 강의 실습
0
140
2
v-pre는 설명이 없나요?
0
152
2
AppCard.vue 만들다 말고 오류가 갑자기 엄청 뜹니다
0
146
1
개발자도구 Vue 탭 관련 문의
0
240
2
강의를 인텔리제이로 수업따라가도 되져?
0
178
2
API 사용시 자동으로 import하는 기능은 어떤것을 설치해야 하나요?
3
279
2