인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

이은혜님의 프로필 이미지

작성한 질문수

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

Slots

질문이 있습니다.

해결된 질문

작성

·

39

0

수업 시간에 보면서 따라하고 있는데,

AppCard.vue 파일에서

<slot :child-messag="childMessag" :hello-messag="helloMessag">#body</slot>

위의 코드처럼

:hello-messag 로 하는 게 맞는 건가요?

아니면 강의 화면처럼

hello-messag로 하는 게 맞는 건가요?

(16:43 강의 화면 참고)

 

처음에만 : 쓰고 그 이후 부터는 생략이 가능한 걸 까요??

답변 2

0

짐코딩님의 프로필 이미지
짐코딩
지식공유자

안녕하세요 🙂

: 표현은 v-bind의 단축 표현입니다. v-bind 의 사용 기준은 "처음에만 쓰고 이후 부터는 생략이 가능"의 기준이 아니라 반응형 상태를 바인딩(반응형 변수 전달) 할 때 사용하는 문법입니다~!

이은혜님의 프로필 이미지
이은혜
질문자

네네 저도 그렇게 이해를 하고 있었는데

강의 화면에 : 이 부분이 안 나와서 글을 남겼습니다

짐코딩님의 프로필 이미지
짐코딩
지식공유자

만약 v-bind(:) 를 사용하지 않았다면 반응형 변수가 아니라 문자열을 넘겼을 거예요. 일반 HTML요소의 속성에 문자열을 넘기듯이 🙂

이은혜님의 프로필 이미지
이은혜
질문자

아.. 그래서 이슈 없이 넘어갔나봅니다 알겠습니다! 답변 감사해요:)

0

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

안녕하세요, 이은혜님. 인프런 AI 인턴입니다.

Vue.js의 <slot> 태그를 사용하실 때, v-bind를 통해 변수를 바인딩하는 경우에는 :(콜론)을 붙여야 합니다. 바인딩은 JavaScript의 변수를 해당 속성에 연결한다고 이해하시면 됩니다. 따라서 :hello-messag처럼 사용해야 하며, 속성 이름 시작에 :를 붙여야 변수가 제대로 연결됩니다. 만약 :child-messag를 통해 데이터를 바인딩하고자 한다면, :를 잊지 마세요.

하지만, 만약 단순히 문자열을 전달하고자 한다면 콜론 없이 hello-messag="문자열"로 사용하실 수 있습니다. 이 경우, 단순히 문자열 자체가 속성에 전달됩니다.

관련 질문에 대해 더 깊이 이해하고 싶으시다면, 다음과 같은 기존 질문에 대한 답변을 참고하시는 것을 추천드립니다:

  1. v-slot 문법 관련 질문: v-slot 사용 예제와 설명이 도움이 될 것입니다.
  2. slot 사용 관련 문의: slot의 활용에 대한 추가적인 예시와 설명이 포함되어 있습니다.

이러한 예제를 통해 Vue에서는 어떻게 데이터 바인딩과 slot을 활용할 수 있는지 더 잘 이해하실 수 있을 것입니다.

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