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

2429 단어 vue부자커 뮤 니 케 이 션
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'; });}
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
    JS AES 암호 화 를 실현 하고 PHP 와 연결 하 는 방법 분석
    C\#간단 한 암호 화 클래스 인 스 턴 스

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage