[ Vue.js ] Object 를 props로 보내는 방법

 

Object  type을 prop로 보내기

---

📌부모 컴포넌트에서 Object 만들기

→ 부모 컴포넌트인 App.vue에서 info 라는 Object를 만들어 key : value 작성

 

 

 

📌 자식 컴포넌트에 Object prop 넘겨주기

 

 

📌 자식 컴포넌트에서 props 등록

→ info 에 타입을 Object로 설정한다.

 

 

 

📌 받아온 데이터를 오브젝트의 프로퍼티에 접근하여 출력한다.

 

📌화면 출력

 

 

 

Object prop의 기본값 설정 방법

---

📌 Object가 undefinde 일때 에러 발생하지 않게 defuault 값을 설정해준다.

 

 

📌자식 컴포넌트에서 default 를 사용하여 기본값을 지정해준다.

→  default: 화살표 함수를 사용하여 값을 retrun 해주는 형태로 작성하면 된다.

 

 

→ 화살표 함수가 아닌 메소드 형식으로도 작성이 가능하다.

 

 

📌 화면 출력

 

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