Vue 2.0 구성 요소 데이터 의 양 방향 연결 문제 실현

지난 절 학습 을 통 해 우 리 는 Vue 의 구성 요소 에서 데이터 전달:prop 이 아래로 전달 되 고 사건 이 위로 전달 되 는 것 을 알 게 되 었 습 니 다.부모 구성 요 소 는 prop 을 통 해 하위 구성 요소 에 데 이 터 를 보 내 고,하위 구성 요 소 는 이 벤트 를 통 해 부모 구성 요소 에 메 시 지 를 보 내 는 것 을 의미 합 니 다.그러나 Vue 에서 props 는 단 방향 데이터 바 인 딩 입 니 다.Vue 1.0 버 전에 서'sync'를 통 해 양 방향 데이터 바 인 딩 을 실현 할 수 있 습 니 다.그러나.sync 는 몇 가지 버 전에 서 제거 되 었 습 니 다.2.3 버 전에 서'sync 수정자'를 다시 도입 하 였 음 에 도 불구 하고 이번 도입 은 컴 파일 시의 문법 사탕 으로 만 존재 합 니 다.'sync 수정자'를 직접 사용 하여 양 방향 데이터 바 인 딩 을 하면 경고 메 시 지 를 보 냅 니 다.그러면 우 리 는 어떻게 구성 요소 에서 양 방향 데이터 바 인 딩 을 실현 합 니까?이 절 에 우 리 는 이 방면 의 관련 지식 을 배 우 러 왔 다.
구성 요소 양 방향 데이터 바 인 딩 실현
이전 절 에서 마지막 예 시 는 Vue 1.0 버 전의.sync 를 사용 하여 데이터 양 방향 연결 을 실현 합 니 다.먼저.sync 수식 자 를 버 리 고 구성 요소 의 양 방향 데이터 바 인 딩 을 실현 하 는 작업 을 살 펴 보 겠 습 니 다.Vue 가 제공 하 는 메커니즘 을 통 해 prop 를 직접 수정 하여 구성 요소 의 양 방향 데이터 바 인 딩 을 실현 합 니 다.
그 사고방식 은 대체로 이렇다.
데이터 렌 더 링 시 prop 렌 더 링 데 이 터 를 사용 합 니 다.

prop 를 하위 구성 요소 자체 의 데이터 에 연결 하고 데 이 터 를 수정 할 때 자신의 데 이 터 를 수정 하여 prop 를 대체 합 니 다.

watch 하위 구성 요소 자체 데이터 의 변경,트리거 이벤트 알림 부모 구성 요소 변경 prop 에 연 결 된 데이터

이렇게 하면 부모 구성 요소 데이터 가 바 뀌 었 을 때 prop 를 저장 하 는 하위 구성 요소 데 이 터 를 수정 하지 않 고 하위 구성 요소 데 이 터 를 매개 로 prop 에 대한 양 방향 수정 을 완성 하 는 것 이 좋 습 니 다.
다음 예제 에 서 는'sync'를 사용 하여 양 방향 데이터 바 인 딩 효 과 를 실현 하지 않 았 습 니 다.
수 정 된 코드 는 다음 과 같 습 니 다.

<div id="app">
 <div class="parent">
  <h3>   Parent  </h3>
  <ul>
   <li>
    <label>  :</label>
    <span>{{ name }}</span>
    <input type="text" v-model="name" />
   </li>
   <li>
    <label>  :</label>
    <span>{{ age }}</span>
    <input type="number" v-model="age" />
   </li>
  </ul>
 </div>
 <child :my-name="name" :my-age="age" @update:my-name="val => name = val" @update:my-age="val => age = val"></child>
</div>
<template id="child">
 <div class="child">
  <h3>   child  </h3>
  <ul>
   <li>
    <label>  </label>
    <span>{{ myName }}</span>
    <input type="text" v-model="childMyName" />
   </li>
   <li>
    <label>  </label>
    <span>{{ myAge }}</span>
    <input type="number" v-model="childMyAge" />
   </li>
  </ul>
 </div>
</template>

위의 이 예시 에서,우 리 는.sync 수식 자 를 사용 하지 않 았 지만,하위 구성 요 소 를 호출 할 때@update 를 사용 했다.

<child :my-name="name" :my-age="age" @update:my-name="val => name = val" @update:my-age="val => age = val"></child>

하위 구성 요소 에서 HTML 템 플 릿 에 렌 더 링 된 데 이 터 는 prop 데 이 터 를 사용 하지만 감청 input 은 하위 구성 요소 자체 가 정의 한 데 이 터 를 v-model 로 사용 합 니 다.이렇게 되면 prop 을 직접 수정 하지 않 을 것 이다.쉽게 말 하면 모든 prop 의 변 화 는 본질 적 으로 부모 구성 요소 에 의 해 이 루어 진다.JavaScript 의 코드 는 다음 과 같 습 니 다.

let parent = new Vue({
 el: '#app',
 data () {
  return {
   name: 'w3cplus',
   age: 7
  }
 },
 components: {
  'child': {
   template: '#child',
   props: ['myName', 'myAge'],
   data () {
    return {
     childMyName: this.myName,
     childMyAge: this.myAge
    }
   },
   watch: {
    childMyName: function (val) {
     this.$emit('update:my-name', val)
    },
    childMyAge: function (val) {
     this.$emit('update:my-age', val)
    }
   }
  }
 }
})

최종 효 과 는 다음 과 같다.
위의 예제 효 과 는 부모 구성 요소 의 데 이 터 를 수정 하 든 하위 구성 요소 의 데 이 터 를 수정 하 든 서로 영향 을 줍 니 다.
 
하위 구성 요소 에 props 의 my Name 과 my Age 를 쓸 수 없 기 때문에 data 에 복사 본 childMyName 과 childMyAge 를 만 듭 니 다.초기 값 은 props 속성 my Name 과 my Age 의 값 이 며,구성 요소 내 props 를 호출 해 야 하 는 모든 곳 에서 data 의 child MyName 과 child MyAge 를 호출 합 니 다.

components: {
 'child': {
  template: '#child',
  props: ['myName', 'myAge'],
  data () {
   return {
    childMyName: this.myName,
    childMyAge: this.myAge
   }
  },
  ...
 }
}

다음은 하위 구성 요소 에서 watch 를 통 해 props 속성의 my Name 과 my Age 를 감청 합 니 다.props 가 수정 되면 data 의 사본 인 childMyName 과 childMyAge 도 데 이 터 를 동기 화 해 야 합 니 다.

...
watch: {
 childMyName: function (val) {
  this.$emit('update:my-name', val)
 },
 childMyAge: function (val) {
  this.$emit('update:my-age', val)
 }
}
...

다음 에 해 야 할 일 은 구성 요소 내 props 속성 이 바 뀌 었 을 때 구성 요소 외(부모 구성 요소)에 알림 을 보 내 구성 요소 내 속성 변경 을 알 리 고 외부(부모 구성 요소)에서 자신의 데 이 터 를 변경 할 지 여 부 를 결정 하 는 것 입 니 다.
다음 에 우 리 는 위의 방안 에 따라 이전 예제 의 switch 단 추 를 개조 합 니 다.
이로써 구성 요소 내부 데이터 와 구성 요소 외부 데이터 의 양 방향 연결,구성 요소 내외 데이터 의 동기 화 를 실현 했다.한 마디 로 하면 구성 요소 내부 가 스스로 바 뀌 었 으 니 외부 에 변경 할 지 말 지 를 결정 하 라 고 알려 준다.
 
어떤 props 가 양 방향 바 인 딩 에 적합 합 니까?
사실 Vue 에서 양 방향 으로 연 결 된 props 는 구성 요소 간 의 데이터 상태 관리 에 불리 합 니 다.특히 복잡 한 업무 에서 실제 프로젝트 에 서 는 양 방향 으로 연 결 된 것 을 최소 화하 고 너무 복잡 한 데이터 처리 로 Vuex 를 사용 하 는 것 을 권장 합 니 다.하지만 양 방향 연결 을 피 할 수 없 는 경우 가 많다.그럼 어떤 장면 에서 props 를 사용 하여 양 방향 연결 을 할 까요?
만약 당신 의 프로젝트 에서 아래 의 조건 을 동시에 만족 시 킬 때,우 리 는 props 를 사용 하여 양 방향 연결 을 하 는 것 을 고려 할 수 있 습 니 다.

구성 요소 내부 에서 props 를 수정 해 야 합 니 다

구성 요 소 는 단순 한 초기 화 보 다 는 외부 에서 실행 할 때 동적 으로 제어 할 수 있어 야 합 니 다

구성 요소 부 서 는 구성 요소 내의 상 태 를 읽 어서 처리 해 야 합 니 다

위의 예 는 우리 가 Vue 2.0 에서 props 의 양 방향 연결 을 어떻게 실현 하 는 지 보 여 주 었 지만 프로젝트 에 이런 양 방향 연결 이 더 많 으 면 중복 되 는 일 을 하 게 될 것 이 고 코드 도 지루 하 며 일이 복잡 해 질 것 이다.이러한 현상 을 바 꾸 기 위해 서 는 Vue 의 mixin 을 통 해 props 의 양 방향 연결 수 요 를 자동화 할 수 있 습 니 다.그러나 이 절 에서 우 리 는 이 분야 의 지식 을 배우 지 않 을 것 이다.그 다음 에 우 리 는 mixin 을 공부 할 때 다시 고 개 를 돌려 이런 기능 을 실현 할 수 있다.
Vue 에서 상술 한 구성 요소 통신 을 제외 하고 다른 방법 도 있 습 니 다.다음 절 에서 우 리 는 이 분야 의 지식 을 계속 공부 할 것 입 니 다.
총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 Vue 2.0 구성 요소 데이터 의 양 방향 연결 문 제 를 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.소 편 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!