vuejs 는$emit 와$on 을 사용 하여 구성 요소 간 의 값 을 전달 하 는 예제 입 니 다.

$emit 와$on 은 구성 요소 간 의 값 을 실현 할 수 있 습 니 다.부모 구성 요소 의 값 은 하위 구성 요소 에 props 를 사용 하 는 것 을 알 고 있 지만 하위 구성 요소 가 부모 구성 요소 에 값 을 전달 하 는 것 을 허용 하지 않 습 니 다.이 럴 때 이 값 을 사용 하면 이 루어 집 니 다.
메모:$emit 와$on 의 이 벤트 는 하나의 공공 인 스 턴 스 에 있어 야 실행 할 수 있 습 니 다.
예:저 는 특정한 시스템 의 주소록 기능 을 실현 하려 고 합 니 다.웹 에서 jQuery 기반 ztree 플러그 인 을 사용 하여 디 렉 터 리 를 보 여 드릴 수 있 지만 vuess 프레임 워 크 에서 tree 디 렉 터 리 는 재 귀적 구성 요 소 를 통 해 이 루어 져 야 합 니 다.
1.현재 두 개의 구성 요소 가 있 습 니 다.부모 구성 요소 contactindex.vue,하위 구성 요소 custtree.vue

2.부모 구성 요소 안의 선택 은행 을 클릭 하여 은행 트 리 디 렉 터 리 구조(vuejs 의 재 귀 구성 요소 로 구현)에서 벗 어 나 려 면 두 가지 전송 값 이 필요 합 니 다.
(1)부모 구성 요 소 는 props 를 통 해 트 리 디 렉 터 리 의 데이터 list 를 하위 구성 요소 에 전송 하여 디 렉 터 리 구 조 를 보 여 줍 니 다.
(2)하위 구성 요소 에서 해당 하 는 은행 을 클릭 하여 은행 의 주소록 을 조회 하 라 고 요청 합 니 다.이 안 에는 클릭 한 은행 의 기구 코드 를 부모 구성 요소 에 전송 해 야 합 니 다.부모 구성 요 소 를 받 은 후에 input 을 통 해 기구 코드 를 백 엔 드 에 제출 하여 조 회 를 요청 해 야 합 니 다.
첫 번 째 는 부모 구성 요소 가 하위 구성 요소 에 값 을 전달 하 는 데 props 를 사용 하면 됩 니 다.이제 두 번 째 상황 을 이야기 하 겠 습 니 다.하위 구성 요소 의 값 을 부모 구성 요소 에 어떻게 전달 하 는 지.
인터넷 바 이 두 는 천편일률 적 으로$emit 를 사용 하여 이 루어 집 니 다.그러나 심각 한 오류 가 있 습 니 다.처음에 저 는 검색 결과 에 따라 조작 을 했 습 니 다.모두 하위 구성 요소$emit 의 뒷부분 구성 요소 가 함수 의 변 화 를 감청 하지 못 했 습 니 다.연 구 를 한 지 오래 되 어서 야$emit 와$on 의 사건 이 반드시 공공 사례 에 있어 야 촉발 할 수 있다 는 것 을 알 게 되 었 습 니 다.나의 조작 은 다음 과 같다.
우선 src 디 렉 터 리 에 bus.js 를 공공 인 스 턴 스 로 추가 합 니 다.

import Vue from 'vue'

export var bus = new Vue()

그 다음으로 부모 구성 요 소 는 created 에서$on 감청 사건 을 정의 합 니 다.

//         import bus.js
import {bus} from '../../bus.js'

created(){
  bus.$on('custTreeSay',(id)=>{
  //    --    
  this.instCode = id;
  //    
  this.popupVisibleTree = false;
  //             
  this.query();
  });
  bus.$on('custTreeSayName',(name)=>{
  //    --    
  this.instName = name;
  });
}

마지막 으로 하위 구성 요소 에서 클릭 이 벤트 를 정의 하고 부모 구성 요 소 를 호출 하 는 방법 은$emit 를 통 해 부모 구성 요소 에 해당 하 는 값 을 전달 합 니 다.

<span @click="propInstCode(model);propInstName(model)">
 {{model.name}}
</span>

<script type="text/javascript">
 import {bus} from '../../bus.js'
 export default {
  props: ['model'],//    props        
  
  //method        ，         
  methods: {
  //           
  propInstCode:function (model) {
  //$emit        
  bus.$emit('custTreeSay',this.model.id);
  },
  propInstName:function (model) {
  bus.$emit('custTreeSayName',this.model.name);
  }
 },
 }

이렇게 하면 하위 구성 요 소 는$emit 를 통 해 bus 를 통 해 부모 구성 요소 에 값 을 전달 할 수 있 습 니 다.마지막 으로 전 달 된 기구 코드 를 통 해 백 엔 드 에 제출 하여 조회 할 수 있 습 니 다.그러나 우 리 는 해당 하 는 기구 이름 으로 고객 에 게 보 여 줘 야 합 니 다.그래서 이 안 에는 두 개의 input 만 설정 하면 됩 니 다.기구 코드 의 input 을 숨 기 고 값 을 전달 해 야 합 니 다.다른 기구 이름 의 input 를 표시 하면 됩 니 다.다음 과 같 습 니 다.

//                         
<div class="query_condition_item">
 <label>    </label>
 <input name="instName" v-model="instName" readonly @click="showTree()">
</div>

<div class="query_condition_item">
 <input name="instCode" v-model="instCode" hidden>
</div>

이 글 은 여기까지 입 니 다.저 는 제 가 개발 한 문제 경험 을 기록 하고 여러분 을 도 울 수 있 기 를 바 랍 니 다!!많은 응원 부 탁 드 리 겠 습 니 다.