[ Vue.js ] 배열을 props 로 보낸 후 v-for 사용하여 상품 목록 출력하기

 

배열을 props 로 보낸 후 출력하기

---

📌 App.vue 에서 product 배열 안에 Object 생성 → 자식 컴포넌트인 ProductList.vue를 components에 등록 해주고  products 배열을 prop으로 보내기

 

 

📌  ProductList.vue에서 props로 받아올 product의 type 은 Array로 지정하고, default 값을 반환 할 수 있게 작성

 

📌 출력 화면

 

 

 

 2 . products 아이템들 꺼내서 상품 목록 만들기

---

📌ProductList.vue에서 ProductItem.vue 등록 → v-for를 사용하여 product를  출력하는 반복문 작성, ProductItem.vue 에 prop 넘기기

 

 

 

📌 ProductList에서 넘어온 props 타입 설정 → 머스타치 문법을 사용하여 값을 꺼내주기

 

 

📌출력 화면

 

참고 : 유튜브 데브리 vue3 강좌