Vue 두 개의 동급 구성 요소 전송 값 실현

Vue 구성 요소 간 에 연결 되 어 있 습 니 다.구성 요소 간 에 서로 값 을 전달 하 는 것 을 피 할 수 없습니다.부 자 는 v-bind 바 인 딩 사용자 정의 속성 과 props 를 사용 하여 받 아들 입 니 다.
자식 은 부모 에 게@사용자 정의 이벤트='함수'this.$emit('사용자 정의 이벤트','보 낼 내용')를 사용 합 니 다.하위 구성 요 소 는$emit 를 통 해 부모 구성 요소 의 함 수 를 촉발 합 니 다.
그런데 두 개의 동급 구성 요소 사이 에 이렇게 서로 값 을 전달 해 요.

<div id='app'>
 <children1></children1>
 <children2></children2>
</div>
<script>
  var children1 = {};
  var children2 = {};
 var vm = new Vue({
  el:'#app',
  components:{
   children1,
   children2
  }
 })
</script>

children 1 구성 요소 의 데 이 터 를 children 2 구성 요소 에 전송 하려 고 합 니 다.
vue 인 스 턴 스 의$on()과$emit()에 주로 사 용 됩 니 다.

 <div id='app'>
  <children1></children1>
  <children2></children2>
 </div>
 <script>
     var Event = new Vue({}); //     vue           
   var children1 = {
   template:`
    <div>
     <button @click='send'>   children2      </button>
    </div>
   `,
   data(){
    return {
     msg:'    children2     '
    }
   },
   methods:{
    send(){ 
     Event.$emit('go',this.msg) 
    }
   }
  };
   var children2 = {
   template:`
    <div>
     <h2> children1       ：{{msg1}}</h2>  
    </div>
   `,
   data(){
    return{
     msg1:''
    }
   },
   created(){
    Event.$on('go',(v) => { //           this
     this.msg1 = v;
    })
   }
  };
  var vm = new Vue({
   el:'#app',
   components:{
    children1,
    children2
   }
  })
</script>

chilren 1 구성 요소 가 데 이 터 를 보 내 려 면 Event.$emit()를 사용 합 니 다.
chilren 2 구성 요소 가 데 이 터 를 받 으 려 면 Eevent.$on()을 사용 하 십시오.
Vue 두 개의 동급 구성 요소 의 전송 값 실현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 동급 구성 요소 의 전송 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!