반응형

vue문법 2

[ 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 해주는 형태로 작성하면 된다. → 화살표 함수가 아닌 메소..

[ Vue.js ] Component & props 사용 방법

1 . 컴포넌트 만들기 ✔ components 폴더에 .vue 파일 생성 ✔ template, script 작성하기 → 디버깅할 때 name 속성을 통해 확인할 수 있으므로 name을 정해주는 것이 좋다 2 . 컴포넌트 사용하기 ✔ impor → App.vue 에서 만들어 놓은 HelloUser 컴포넌트를 import 해준다. ✔ 컴포넌트 등록 → 컴포넌트를 사용하기 위해서는 컴포넌트 등록이 필요하기 때문에 components 오브젝트 안에 key: value 형태롤 컴포넌트를 등록해 준다. (key와 value 값이 같은 경우 하나로 생략해서 작성하면 된다.(ES6 문법)) ✔ 컴포넌트 사용 → template 태그 안에 사용할 컴포넌트 태그를 작성한다. ✔ 화면 출력 → HelloUser에 작성한 '..

반응형