vue 2.0 부자 구성 요소 간 통신 의 실현 방법

1.부모 구성 요소 가 하위 구성 요소 에 데 이 터 를 전달 합 니 다.
부모 구성 요소 데 이 터 는 어떻게 하위 구성 요소 에 전달 합 니까?props 속성 으로 구현 가능
부모 구성 요소:

<parent> 
<child :child-msg="msg"></child>//       -     
</parent>
data(){ return { msg: [1,2,3] };}

하위 구성 요 소 는 props 를 통 해 데 이 터 를 받 습 니 다:
방식 1:

props: ['childMsg']

방식 2:

props: { childMsg: Array //           ，      ，   }
props: { childMsg: { type: Array, default: [0,0,0] //           }}

이렇게 되면 부모 구성 요소 가 하위 구성 요소 에 데 이 터 를 전달 하 는 것 을 실현 합 니 다.
2.하위 구성 요소 와 부모 구성 요소 통신
그렇다면 하위 구성 요소 가 데 이 터 를 바 꾸 려 면?이것 은 vue 에서 허용 되 지 않 습 니 다.vue 는 단 방향 데이터 만 전달 할 수 있 기 때 문 입 니 다.이 때 우 리 는 사용자 정의 이 벤트 를 실행 하여 부모 구성 요소 에 게 데 이 터 를 변경 하 라 고 알 리 고 하위 구성 요소 데 이 터 를 변경 하 는 목적 을 달성 할 수 있 습 니 다.
사용자 정의 이벤트
모든 Vue 인 스 턴 스 는 이벤트 인터페이스(Events interface)를 실현 합 니 다.즉,:

$on(eventName)감청 이벤트 사용

$emit(eventName)를 사용 하여 이벤트 트리거

부모 구성 요 소 는 하위 구성 요 소 를 사용 하 는 곳 에서 하위 구성 요소 가 촉발 하 는 이 벤트 를 직접 v-on 으로 감청 할 수 있 습 니 다.
하위 구성 요소:

<template>
<div @click="up">
</div>
</template>
methods: { up() { this.$emit('resultChange','hehe');
      //    resultChange  ，'hehe'           }}

부모 구성 요소:

<div>
<child @on-result-change="mychangHandle" :msg="msg">
</child> //        upup  ,    change  
</div>
methods: { mychangHandle(msg) { this.msg = msg; }}

트리거 이 벤트 는 낙타 봉 형식의 사용자 정의 이벤트 이름 을 사용 합 니 다.부모 구성 요소 에서 on-evnet-name 형식 으로 감청 할 수 있 습 니 다.
3.임 의 구성 요소 간 통신
만약 두 개의 구성 요소 가 부자 구성 요소 가 아니라면 어떻게 통신 합 니까?이 때 이벤트 허브 를 통 해 통신 을 할 수 있 습 니 다.
이벤트 허브 란 이벤트 센터 를 만 드 는 것 으로 중계 역 에 해당 하 며 이벤트 전달 과 이벤트 수신 을 할 수 있 습 니 다.
중앙 이벤트 버스 로 빈 Vue 인 스 턴 스 사용 하기:

let Hub = new Vue(); //      ,  Hub     

구성 요소 1 트리거:

<div @click="eve">
</div>
methods: { eve() { Hub.$emit('change','hehe'); //Hub     }}

구성 요소 2 수신:

<div></div>
created() { Hub.$on('change', () => { //Hub     this.msg = 'hehe'; });}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.