vue 컴포넌트 데이터 전달

오늘은 step 10. eventBus 컴포넌트 간 데이터 전달에 대해 포스팅하려고 합니다. 컴포넌트 간의 데이터 전달은 총 2가지가 있습니다. 첫 번째 방법은 서로 컴포넌트끼리 연결되어 event-emit(부모로 전달), props(자식으로 전달)의 형태로 사용되는 데이터 전달 방법이 있고, 두 번째 방법은 서로 관계없는 컴포넌트끼리 데이터를 전달하는 eventBus의 연결 방법이 있습니다. 바로 앞에 첫번째 방법에 대해 포스팅했기 때문에, 오늘은 두번째 방법인 서로 관계없는 컴포넌트끼리 데이터를 전달하는 eventBus 방식에 대해 진행하겠습니다. eventBus는 컴포넌트간에 상위(부모), 하위(자식) 관계가 없더라도 데이터를 전달할 수 있다는 장점이 있지만,너무 많이 사용하면 관리가 안된다는 단점..

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