Vue.js 중급 강의 정리 - 챕터1 문제점 개선 ( 리팩토링 )

앞의 기본에서 문제점

• 컴포넌트 간 데이터 통신이 없어서 데이터 갱신이 안되는 문제

상위 컴포넌트의 값을 하위 컴포넌트 프로퍼티로 보내기

• v-bind:"프로퍼티 명"
• 하위 컴포넌트의 props 프로퍼티에 "프로퍼티 명"으로 된 속성에 해당 값이 입력

하위 컴포넌트에서 상위 컴포넌트 이벤트 발생시키기

• this.$emit('이벤트 명', 인수...);
• 상위 컴포넌트에 이벤트 등록하기
  • v-on:'이벤트 명'='호출할 이벤트 이름'
  • 여기서 오타를 조심하자. 오타가 있어도 Vue 린트가 찾지 못 한다.

데이터 변경은 최소한의 참조를 통해서 한다.

• 그렇다~ 당연한 것이다.