event-emit

오늘은 Vue.JS step 9. 같은 컴포넌트 레벨의 데이터 전달(자식1 -> 자식2)에 대해 포스팅하려고 합니다. 컴포넌트 간의 데이터 전달은 총 2가지가 있습니다. 첫 번째 방법은 서로 컴포넌트끼리 연결되어 event-emit(부모로 전달), props(자식으로 전달)의 형태로 사용되는 데이터 전달 방법이 있고, 두 번째 방법은 서로 관계없는 컴포넌트끼리 데이터를 전달하는 eventBus의 연결 방법이 있습니다. 오늘은 첫번째 방법인 event-emit(부모로 전달), props(자식으로 전달) 방식에 대해 진행하겠습니다. 상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 데이터를 전달할때는 props를 사용하고, 하위(자식) 컴포넌트에서 상위(부모) 컴포넌트로 데이터를 전달할때는 event-emit..

오늘은 Vue.JS step 8. event-emit 데이터 전달(자식 -> 부모)에 대해 포스팅하려고 합니다. 하위(자식) 컴포넌트에서 상위(부모) 컴포넌트로 데이터를 상속하기 위해서는 하위(자식) 컴포넌트에서 이벤트를 발생시켜 전달합니다. 디렉티브(directive)의 이벤트 문법인 v-on이 사용되어야 하며 v-on:[하위(자식) 컴포넌트 이벤트 이름]="[상위(부모) 이벤트 핸들링 메소드 이름]" 형태로 선언되어야 합니다. 그리고 하위(자식) 컴포넌트 이벤트 이름은 this.$emit('이벤트 이름', 전달 파라미터) 형태로 $emit() 안에 이벤트 이름과 전달하고자 하는 파라미터를 정의해야 합니다. 파라미터 전달 없이 이벤트만 실행하는 것이 목적이라면 this.$emit('이벤트 이름') 형태..