v-model 을 교묘 하 게 활용 하여 부자 구성 요소 의 전 가 를 실현 하 는 방법 예제

v-model 소개
Vue 를 잘 아 는 친구 들 은 v-model 이 Vue 의 큰 특색 이라는 것 을 알 고 양 방향 데이터 연결 을 실현 할 수 있 습 니 다.그러나 본질 적 으로 문법 사탕 에 불과 하고 사용자 의 입력 사건 을 감청 하여 데 이 터 를 업데이트 하 는 일 을 맡 는 다.
다음은 Vue 공식 문서 에서 발췌 한 것 입 니 다.
v-model 은 내부 에서 서로 다른 속성 을 서로 다른 입력 요소 로 사용 하고 서로 다른 이 벤트 를 던 집 니 다.

text 와 textarea 는 value 속성 과 input 이 벤트 를 사용 합 니 다.

checkbox 와 radio 는 checked 속성 과 change 사건 을 사용 합 니 다.

selection 필드 는 value 를 prop 로 하고 change 를 이벤트 로 합 니 다.

어떻게 v-model 을 교묘 하 게 이용 하여 부자 구성 요소 의 전 가 를 실현 합 니까?
보통 하위 구성 요소 의 한 변 수 를 업데이트 하고 부모 구성 요 소 를 알려 야 할 때 하위 구성 요소 가 사건 을 촉발 하고 부모 구성 요소 가 이 사건 을 감청 해 야 합 니 다.
그러나 위의 v-model 의 실현 원 리 를 숙지 한 후에 우 리 는 이 원 리 를 교묘 하 게 활용 할 수 있다(v-model 은 내부 에서 서로 다른 속성 을 서로 다른 입력 요소 로 사용 하고 서로 다른 사건 을 던 질 수 있다).
방법 총화:
1.하위 구성 요 소 는 value 를 props 속성 으로 설정 하고 value 값 을 주동 적 으로 바 꾸 지 않 습 니 다.
2.하위 구성 요 소 는 this.$emit('input','updateValue')를 통 해 updateValue 값 을 부모 구성 요소 에 전달 합 니 다.
3.부모 구성 요 소 는 v-model="localValue"를 통 해 로 컬 변 수 를 연결 하면 하위 구성 요소 value 값 과 부모 구성 요소 updateValue 값 을 동기 화하 여 업데이트 할 수 있 습 니 다.
예 를 들다
하위 구성 요소
하위 구성 요 소 는 button 을 포함 하고 value 속성 을 props 로 설정 합 니 다(v-model 은 value 속성 을 사용 하기 때 문 입 니 다).
button 을 누 르 면 sum 값 에 1 을 추가 하고 this.$emit('input',+sum)를 통 해 업 데 이 트 된 값 을 부모 구성 요소 에 전달 합 니 다.(전제:부모 구성 요소 에 전달 하 는 값 은 반드시 value 에 부여 하고 싶 습 니 다)

<template>
 <div>
  <button @click="increase" style="border: 1px solid black">increase</button>
 </div>
</template>
<script>
let sum = 0
export default {
 name: 'vmodel',
 props: {
  value: {
   type: Number,
   default: 0
  }
 },
 methods: {
  increase () {
   this.$emit('input', ++sum)
   console.log('value1', this.value)
  
   setTimeout(() => {
    console.log('value2', this.value)
   }, 50)
  }
 }
}
</script>

부모 구성 요소
부모 구성 요소 에서 v-model 을 통 해 로 컬 변 수 를 연결 하면 하위 구성 요소 의 동기 화 업 데 이 트 를 실현 할 수 있 습 니 다.

<div>
  <increase v-model="rangeValue"></increase>
  <p>value:{{rangeValue}}</p>
</div>
<script>
data () {
  return {
   rangeValue: 0
  }
}
</script>

실제로 이 과정 은 우선 하위 구성 요소 가$emit('input')를 통 해 부모 구성 요소 의 로 컬 변 수 를 업데이트 한 다음 하위 구성 요소 의 value 속성 이 props 를 통 해 업 데 이 트 됩 니 다.
총결산
이 방식 은 하위 구성 요소 의 전송 에 특히 적합 합 니 다(하위 구성 요소 동기 화 업데이트)
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.