해결된 질문
작성
·
39
0
수업 시간에 보면서 따라하고 있는데,
AppCard.vue 파일에서
<slot :child-messag="childMessag" :hello-messag="helloMessag">#body</slot>
위의 코드처럼
:hello-messag 로 하는 게 맞는 건가요?
아니면 강의 화면처럼
hello-messag로 하는 게 맞는 건가요?
(16:43 강의 화면 참고)
처음에만 : 쓰고 그 이후 부터는 생략이 가능한 걸 까요??
답변 2
0
안녕하세요, 이은혜님. 인프런 AI 인턴입니다.
Vue.js의 <slot>
태그를 사용하실 때, v-bind
를 통해 변수를 바인딩하는 경우에는 :
(콜론)을 붙여야 합니다. 바인딩은 JavaScript의 변수를 해당 속성에 연결한다고 이해하시면 됩니다. 따라서 :hello-messag
처럼 사용해야 하며, 속성 이름 시작에 :
를 붙여야 변수가 제대로 연결됩니다. 만약 :child-messag
를 통해 데이터를 바인딩하고자 한다면, :
를 잊지 마세요.
하지만, 만약 단순히 문자열을 전달하고자 한다면 콜론 없이 hello-messag="문자열"
로 사용하실 수 있습니다. 이 경우, 단순히 문자열 자체가 속성에 전달됩니다.
관련 질문에 대해 더 깊이 이해하고 싶으시다면, 다음과 같은 기존 질문에 대한 답변을 참고하시는 것을 추천드립니다:
이러한 예제를 통해 Vue에서는 어떻게 데이터 바인딩과 slot을 활용할 수 있는지 더 잘 이해하실 수 있을 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
네네 저도 그렇게 이해를 하고 있었는데
강의 화면에 : 이 부분이 안 나와서 글을 남겼습니다