Vue에서 Prop 보내기 가이드
<p>저는 아직 Vue를 처음 접했기 때문에 아직 논리를 완전히 이해하지 못했습니다. 내 문제는 티켓과 티켓 목록 구성 요소가 있다는 것입니다. 따라서 티켓 목록 구성 요소에 없을 때 일부 티켓 데이터를 만들고 티켓 구성 요소를 기반으로 이를 표시하려고 합니다. 좀 더 명확히 하기 위해 이것은 내 티켓 목록 구성 요소입니다. </p>
<pre class="brush:php;toolbar:false;"><템플릿>
<섹션 클래스="티켓">
<div class="컨테이너">
<div 클래스="행">
<div 클래스="col-12 col-md-3 mb-3">
<Ticket v-for="ticket in ticket" :key="ticket.id" :product="ticket"/>
</div>
</div>
</div>
</섹션>
</템플릿>
<스크립트>
'./Ticket'에서 티켓 가져오기
기본값 내보내기 {
구성요소: {
티켓
},
데이터() {
반품 {
티켓: [
{
아이디: 0,
카테고리: "Einzelkarte",
가격: "€3,50",
관세: [
"Wählen Sie eine Option",
"에르왁센",
"Erwachsener 음.",
"킨더/유겐들리체",
"Kinder / Jugendliche erm.",
],
사용 가능 금액: 23,
기사_번호: "2021.05.04-2673990197-1",
},
],
};
},
}
<p>티켓 구성요소도 있습니다: </p>
<pre class="brush:php;toolbar:false;"><템플릿>
<위젯 유형="티켓" 클래스="--flex-column">
<div class="top --flex-column">
<div class="밴드명 -bold">유령 쥐</div>
<div class="tourname">홈 투어</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/concert.png"alt=""
<div class="deetz --flex-row-j!sb">
<div class="event --flex-column">
<div class="date">2017년 3월 3일</div>
<div class="location -bold">인디애나주 블루밍턴</div>
</div>
<div class="price --flex-column">
<div class="label">가격</div>
<div class="cost -bold">€{{ ticket.price }}</div>
</div>
</div>
</div>
<div class="rip"></div>
<div class="bottom --flex-row-j!sb">
<a class="btn 버튼" href="#>장바구니에 추가</a>
</div>
</위젯>
</템플릿>
<스크립트>
기본값 내보내기 {
props: ['티켓'],
}
</스크립트>
<스타일 범위>
@import 'https://i.koya.io/flex/1.1.0.css';
*, ::전 후 {
상자 크기 조정: 설정 해제;
}
<p>그래서 페이지에 TicketList 구성 요소를 표시하고 있는데 문제는 아무 것도 표시하지 않는다는 것입니다. 그래서 이들을 어떻게 연결하고 티켓 구성 요소를 기반으로 티켓 데이터를 표시하는지 알고 싶습니다. 분명히 밝혔기를 바랍니다. 그렇지 않은 경우 댓글로 답변해 드릴 수 있습니다. </p>
