인프런 커뮤니티 질문&답변
작성한 질문수
{{}} 문법에 대해 질문있습니다~~~
작성
·
163
2
안녕하세요~ 어제 결제하고 강의 아주 유익하게 듣고있습니다.
그 하위 컴포넌트 <app-header>에서 props를 바로 나타내고 싶어서
<app-header v-bind:propsdata="num">
{{propsdata}}
</app-header>
라고 표현했는데, 안되더군요! 그래서
var appHeader = {
template:'<div>header: {{propsdata}}</div>',
props:['propsdata']
}
넣어 줬더니 되는데,
하위 컴포넌트로 지정한 저런 태그
(app-header,app-content)들은 보통 html 태그들과는
완전 다른 종류라서 저런식으로 나타낼순 없는 건가요?
답변 1
3
캡틴판교
지식공유자
안녕하세요 박굿뜨님, 좋은 질문입니다. 일반적으로 props 속성으로 받은 데이터는 하위 컴포넌트의 템플릿 속성에서 데이터 바인딩으로 표현합니다. 만약 위와 같은 형태로 나타내시고 싶으면 slot 이라는 문법을 사용하시면 돼요 :)
https://vuejs.org/v2/guide/components-slots.html
그리고 해당 문법에 대해서는 제가 완벽 가이드에서도 좀 다뤄놓은게 있으니 참고하시면 될 것 같습니다. 그럼 나머지 강좌도 재밌게 들으시구요 :)