바바

📌componet1을 자식 컴포넌트로 등록한 App.vue 📌componet1은 componet2를 componet2는 componet3을 자식 컴포넌트로 등록 → 마지막 자식 컴포넌트인 componet3에서 상위 부모컴포넌트인 App.vue의 prop을 받는 방법으로 , App.vue부터componet3.vue 까지 한 단계씩 prop을 전달하는 방법이 있지만, 이 방법은 번거로움으로 provide & inject 을 사용해서 prop을 보낸다. Provide & Inject 를 사용하여 prop 넘겨주기 ✔ provide : 데이터를 넘겨주는 쪽에서 사용(부모컴포넌트) ✔ inject : 데이터를 넘겨 받을 곳에서 사용(자식컴포넌트) 📌 App 컴포넌트에서 provide에 prop으로 보낼 변수명과 ..

Object type을 prop로 보내기 📌부모 컴포넌트에서 Object 만들기 → 부모 컴포넌트인 App.vue에서 info 라는 Object를 만들어 key : value 작성 📌 자식 컴포넌트에 Object prop 넘겨주기 📌 자식 컴포넌트에서 props 등록 → info 에 타입을 Object로 설정한다. 📌 받아온 데이터를 오브젝트의 프로퍼티에 접근하여 출력한다. 📌화면 출력 Object prop의 기본값 설정 방법 📌 Object가 undefinde 일때 에러 발생하지 않게 defuault 값을 설정해준다. 📌자식 컴포넌트에서 default 를 사용하여 기본값을 지정해준다. → default: 화살표 함수를 사용하여 값을 retrun 해주는 형태로 작성하면 된다. → 화살표 함수가 아닌 메소..

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

Vue 라이프 사이클(lifecycle) - 인스턴스나 컴포넌트가 생성되고 소멸되기까지의 단계 - 각 단계에서 실행되는 함수들을 라이프사이클 훅이라고 한다. - 크게 생성(create), DOM에 부착(mount), 업데이트(update), 소멸(distory) 4가지 과정을 거친다. beforeCreate Vue 인스턴스가 초기화 된 직후에 발생 컴포넌트가 DOM에 추가되기 전이여서 this.$el 사용할 수 없음 데이터와 이벤트가 설정되기 전이여서 data, methods에 접근할 수 없음 created 인스턴스가 부착되기 전이기 때문에 template 속성에 정의된 돔 요소에 접근 불가 data, methods 등이 활성화되어 접근 가능 컴포넌트 초기에 외부에서 받아온 값들로 data를 세팅하거나,..