VUE가 데이터를 전송하는 방식

Vue 구성 요소 간에 데이터를 전송하는 여러 가지 방법:

1. 부모 구성 요소는 소품을 사용하여 자식 구성 요소를 전달합니다.

// 부모 컴포넌트

<템플릿>

<사업부 클래스="앱-컨테이너">

<사업부 클래스="박스">

<Children :msg="message" ></Children> ///Children은 하위 구성 요소로 정보를 전달하는 하위 구성 요소입니다.

</div>

</div>

</템플릿>

//아버지 정보 내보내기 default { data(){ return{ message:'123112', userinfo:{name:'wsc',age:18}, } },
//하위 구성 요소 정의 export default { 
  props:['msg'] 
} 에서 받은 사용자 지정 속성
//Call 
<template> 
  <div class="left-container"> 
    <h3>Children 컴포넌트</h3> 
    <p>메시지 값은 { 
   
   {msg}}입니다</p> 
  </div> 
</template>

2. 자식 구성 요소를 부모 구성 요소에 전달하고 $emit을 사용하여 이벤트를 발송합니다.

//하위 구성 
요소 메서드: { 
    add(){ 
      this.count++ 
　　　　//countChange에 값 전달 
      this.$emit('count',this.count) 
    } 
  }

//Parent component 
<template> 
  <div class="app-container"> 
    <h1>Parent component</h1> 
    <div class="box"> 
　　　　// @countChange 를 통해 자식 컴포넌트가 전달한 값을 받아 할당 getCount 메서드 
      <Children @count='getCount'></Children> 
    </div> 
  </div> 
</template>

방법:{ 
//데이터 가져오기 
    getNewCount(val){ 
        this.countFromSon=val 
    } 
  }

3. 기타

1. 버스버스, 반응형 미지원

(1) main.js는 빈 Vue 인스턴스를 정의합니다.

Vue.prototype.$bus = 새로운 Vue()

(2) 발신자

메소드:{ 
    send(row){ 
      this.$bus.$emit('reject',row) 
    } 
  }

(3) 받는 사람

mount() { 
      this.$bus.$on('reject',(row)=>{ 
          this.info=row 
      }) 
    }

2.window.parent

전달: window.parent.parameter 이름

window.parent.functionName(매개변수1, 매개변수2, ...)

허용: window.parameter 이름

window.function name = (매개변수 1, 매개변수 2, ...) => {

함수 실행

}

3.ref

//传输
</template> 
<div> 
   <a-button @click='handleEvent(record)'>{ 
   
   { text }}</a-button> 
   <Event ref='eventForm' @ok='eventFormOk'>< /이벤트> 
 </div> 
</template> 

handleEvent(레코드) { 
  this.$refs.eventForm.edit(레코드) 
},

// <이벤트> 인터페이스 수락

방법: { 
  edit(record) { 

     console.log(record) //받은 데이터 
  }, 
}

4. Vuex 상태 관리자( 매개변수를 전달하고 실시간으로 데이터를 새로고침하는 vue 공개 방법 참조 )

VUE가 데이터를 전송하는 방식

추천