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