[Vue] 컴포넌트 간 데이터전달 방법 3가지 - eventBus, Store(vuex)

components/LoginForm.vue

views/LoginPage.vue

App.vue

components/common/AppHeader.vue

 

컴포넌트 간 데이터전달 방법

 

1. 기본 컴포넌트 통신 방법

LoginForm안의 데이터 값을 LoginPage를 거쳐서 APP 로 보낸 후 다시 AppHeader로 전달

LoginForm에서 이벤트를 2번 올리고 App에서 1번 내린다

 

 

2. EventBus

로그인폼에서 APP헤더로 보내서 스트링값으로 표현하는 방법

 

3. Store - Vuex (추천)

Data를 Store에 담아 꺼내서 어디서든 자유롭게 사용

규모가 커질수록 스토어를 통해 상태괸라를 하면 편하게 관리할 수 있다.