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에 담아 꺼내서 어디서든 자유롭게 사용
규모가 커질수록 스토어를 통해 상태괸라를 하면 편하게 관리할 수 있다.
반응형
'UXUI Development > Vue.js' 카테고리의 다른 글
| [Vue] Vuex - 새로고침시에도 브라우저 저장소로 인증 값 보존 (0) | 2022.01.04 |
|---|---|
| [Vue] Axios Interceptors (엑시오스 인터셉터) (0) | 2022.01.03 |
| [vuex] Vuex (Store) (0) | 2022.01.03 |
| [Vue] dependencies / devDependencies 차이 (0) | 2022.01.03 |
| [vue-router] vue router (Programmatic Navigation), router.push (0) | 2021.12.29 |
| [Vue] vue 환경변수 - Vue CLI의 .env 파일 규칙과 실무 환경 구성 방법 (0) | 2021.12.28 |
| [Vue] vue 환경변수 - .env 파일과 환경변수 설정방법 (0) | 2021.12.28 |
| [Vue] API 설정 공통화_ axios.create() (0) | 2021.12.28 |