Vue 구성 요소 간 전송 값 깊이 이해

1.부모 구성 요소 가 하위 구성 요소 에 데 이 터 를 전달 합 니 다.
Vue 에 서 는 props 를 사용 하여 하위 구성 요소 에 데 이 터 를 전달 할 수 있 습 니 다.
하위 구성 요소 부분:

이것 은 header.vue 의 HTML 부분 이 고 로 고 는 data 에서 정 의 된 변수 입 니 다.
부모 구성 요소 에서 로고 값 을 가 져 오 려 면 props:['logo']를 사용 해 야 합 니 다.

props 에 요 소 를 추가 한 후 data 에 변 수 를 추가 할 필요 가 없습니다.
부모 구성 요소 부분:

구성 요 소 를 호출 할 때 v-bind 를 사용 하여 로고 의 값 을 App.vue 에서 정의 하 는 변수 logoMsg 로 연결 합 니 다.

그리고 App.vue 에서 logoMsg 의 값 을 header.vue 에 전달 할 수 있 습 니 다.

2.하위 구성 요소 가 부모 구성 요소 에 데 이 터 를 전달 합 니 다.
하위 구성 요 소 는 주로 이벤트 로 부모 구성 요소 에 데 이 터 를 전달 합 니 다.
하위 구성 요소 부분:

이것 은 login.vue 의 HTML 부분 입 니 다.의 값 이 변 할 때 username 을 App.vue 에 전달 합 니 다.
먼저 방법 setUser 를 설명 하고 change 이벤트 로 setUser 를 호출 합 니 다.

setUser 에 서 는 transferUser 이 벤트 를 옮 겨 다 니 며 this.username 을 되 돌려 줍 니 다.
그 중에서 transferUser 는 사용자 정의 이벤트 입 니 다.기능 은 중간 회전 과 유사 합 니 다.this.username 은 이 이 벤트 를 통 해 부모 구성 요소 에 전 달 됩 니 다.
부모 구성 요소 부분:

부모 구성 요소 App.vue 에서 getUser 방법 을 설명 합 니 다.transferUser 이벤트 로 getUser 방법 을 호출 하여 하위 구성 요소 에서 전 달 된 인자 username 을 가 져 옵 니 다.

getUser 방법의 매개 변수 msg 는 하위 구성 요소 에서 전 달 된 매개 변수 username 입 니 다.

3.하위 구성 요소 가 하위 구성 요소 에 데 이 터 를 전달 합 니 다.
Vue 는 하위 에 직접 연결 하 는 방법 이 없습니다.데 이 터 를 전달 해 야 할 하위 구성 요 소 를 하나의 구성 요소 로 통합 하 는 것 을 권장 합 니 다.자식 대 자식 전 삼 이 필요 하 다 면 부모 구성 요소 에서 하위 구성 요소 로 먼저 전 달 될 수 있 습 니 다.
개발 에 편리 하도록 Vue 는 구성 요소 간 의 매개 변수 전달 을 편리 하 게 실현 할 수 있 는상태 관리 도구 Vuex을 출시 했다.
총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Vue 구성 요소 간 의 전송 값 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!