VUE 하위 구성 요소 가 부모 구성 요소 에 값 을 전달 하 는 것 에 대한 상세 한 설명(다 중 값 전송 및 추가 매개 변수 필드 추가 포함)

1.하위 구성 요소 가 부모 구성 요소 에 값 을 전달 합 니 다.
하위 구성 요소:

this.$emit('change', this.value);

부모 구성 요소:

<!--            -->
<editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange($event)" />

//       
async costPlannedAmountChange(value) {
	console.log(value)
}

하위 구성 요 소 를 사용 할 때 change 함 수 를 연결 하 는 이벤트 처리 함수 도 다음 과 같은 형식 으로 쓸 수 있 습 니 다.

<editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange" />

이벤트 처리 함 수 를 바 인 딩 할 때 괄호 를 끼 지 않 아 도 됩 니 다.형 삼 은 기본적으로 이벤트 대상 입 니 다.바 인 딩 할 때 괄호 를 끼 우 고 이벤트 대상 을 사용 하려 면$event 를 실제 인삼 으로 입력 해 야 합 니 다.
2.하위 구성 요소 가 부모 구성 요소 에 값 을 전달 하고 추가 매개 변 수 를 가 져 옵 니 다.
record 는 추가 매개 변수 입 니 다.
하위 구성 요소:

this.$emit('change', this.value);

부모 구성 요소:

<!--    -->
<template slot="planned_amount" slot-scope="text, record">
 <!--            -->
 <editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange(record,$event)" />
</template>

//       
async costPlannedAmountChange(record,value) {
 console.log(record,value)
},

이벤트 처리 함 수 를 바 인 딩 할 때 record 와$event 의 순 서 는 요구 하지 않 지만 vue 이벤트 바 인 딩 습관 에 따라$event 는 보통 실제 인삼 목록 끝 에 놓 습 니 다.
3.하위 구성 요소 가 부모 구성 요소 에 여러 값 을 전달 합 니 다.
하위 구성 요소:

//           
this.$emit('change', this.value,this.text);

부모 구성 요소:

<editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange" />

//       
async costPlannedAmountChange(param1,param2) {
  console.log(param1,param2)
},

이벤트 처리 함 수 를 바 인 딩 할 때 괄호 를 휴대 할 수 없습니다!!괄호 를 가지 고 괄호 안에$event 를 추가 하면 하위 구성 요소 가 전달 하 는 첫 번 째 인자 만 가 져 올 수 있 습 니 다.
4.하위 구성 요소 가 부모 구성 요소 에 여러 개의 값 을 전달 하고 추가 매개 변 수 를 가 져 옵 니 다.
record 는 추가 매개 변수 입 니 다.
하위 구성 요소:

//           
this.$emit('change', this.value,this.text);

부모 구성 요소:

<template slot="planned_amount" slot-scope="text, record">
 <!--            -->
  <editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange(record,arguments)" />
</template>

//       
async costPlannedAmountChange(record,args) {
  console.log(record,args)
},

arguments 는 방법 바 인 딩 의 키워드 로 내부 에는 모든 방법 이 트리거 될 때 전달 되 는 실제 인삼 이 포함 되 어 있 습 니 다.arguments 와 추가 매개 변수의 위 치 는 누가 먼저,누가 나중에 요구 하지 않 는 지,arguments 를 뒤에 놓 는 것 을 권장 합 니 다.
args 의 인쇄 결과 보기:

총결산
여기 서 VUE 하위 구성 요소 가 부모 구성 요소 에 값 을 전달 하 는 것(다 중 값 전송 및 추가 매개 변수 필드 추가 포함)에 관 한 글 을 소개 합 니 다.더 많은 VUE 하위 구성 요소 가 부모 구성 요소 에 값 을 전달 하 는 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 지원 바 랍 니 다!