Vue 2.3 컴포넌트의 2방향 바인딩

Vue 2.3 컴포넌트의 2방향 바인딩

이해했습니다..syncVue 2.3에서 반환된 수식자는 '다중 선택' 질문과 답변을 구현하는 단순한 하위 구성 요소에 사용합니다.부모 컴포넌트는 아이를 다음과 같이 호출합니다.

<question
  :stem="What is your favourite colour?"
  :options="['Blue', 'No, wait, aaaaargh!']
  :answer.sync="userChoice"
>

부모에 문자열 데이터 요소가 있습니다.userChoice하위 구성요소의 결과를 저장합니다.어린이가 옵션에 대한 질문과 라디오 버튼을 표시합니다.아이의 필수 비트는 다음과 같습니다(Quasar를 사용하므로,q-radio):

<template>
  <div>
    <h5>{{stem}}</h5>
    <div class="option" v-for="opt in options">
      <label >
        <q-radio v-model="option" :val="opt.val" @input="handleInput"></q-radio>
        {{opt.text}}
      </label>
    </div>
  </div>
</template>

export default {
  props: {
    stem: String,
    options: Array,
    answer: String
  },
  data: () => ({
    option: null
  }),
  methods: {
    handleInput () {
      this.$emit('update:answer', this.option)
    }
  }
}

이것은 모두 정상적으로 동작하고 있습니다.단, 부모가 다음 값을 변경할 경우userChoice앱에서 다른 문제가 발생하여 아이가 라디오 버튼을 업데이트하지 않습니다.나는 이것을 포함해야만 했다.watch자녀:

  watch: {
    answer () {
      this.option = this.answer
    }
  }

다만, 다소 장황하게 느껴져, 이벤트를 발신해 부모의 데이터를 갱신하는 것이, 실제로 아이의 「관람」이벤트도 발화하지 않을까 걱정했습니다.이 경우 몇 번의 사이클을 낭비하는 것 이외에는 효과가 없습니다만, 로그 기록이나 카운트 중이라면, 그것은 잘못된 긍정입니다.

이것이 진정한 2방향 바인딩(예: 동적 부모 → 자식 및 자식 → 부모)에 대한 올바른 솔루션일 수 있습니다.양쪽에서 '입력' 및 '출력' 데이터를 연결하는 방법에 대해 뭔가 빠뜨린 것이 있습니까?

궁금할 경우를 대비해서, 부모가 'userChoice'를 변경하고자 하는 가장 일반적인 경우는 'Clear Answers' 버튼을 누르면 다음과 같이 설정됩니다.userChoice빈 문자열로 돌아갑니다.그러면 모든 라디오 버튼을 '설정 해제'하는 효과가 있을 것입니다.

당신의 구조에는 몇 가지 이상한 점이 있었지만, 기본적으로는 효과가 없었습니다.answer.sync에 전파하면 동작합니다.q-radio변경이 발생하는 컴포넌트.부모 응답 변경은 적절하게 처리되지만 값을 지우려면 null이 아닌 객체로 설정해야 합니다(할당 가능해야 하기 때문이라고 생각합니다).

의 설정을 갱신하다options잘 안 된 게 눈에 띄어요

사용하고 있다answer에서q-radio체크 상태를 제어한다(v-model라디오에서 특별한 행동을 하기 때문에value와 함께v-model)의 코멘트를 보면q-radio설정할 수 있는 값을 갖기를 원합니다.당신은 그것을 에 근거한 계산으로 할 수 있을 것이다.answer 명령어는 "" 대신 option: " " " " 입니다.getanswer및 , 。set 하다emitval을 for 의 q-radio그리고 내가 설명하는 계산도.proxyAnswerupdate즉 '이벤트', '이벤트', '이벤트',.sync수식어가 필요합니다.,도.q-radio 할 으로 끌어들이기 위한 입니다.q-radio.

(제가 설명하는 것은 효과적으로 데이터 항목과 워처를 사용하여 수행하는 작업입니다만, 이를 캡슐화하기 위해서는 계산 방식이 더 좋습니다.)

new Vue({
  el: '#app',
  data: {
    userChoice: null,
    options: ['Blue', 'No, wait, aaaaargh!'].map(v => ({
      value: v,
      text: v
    }))
  },
  components: {
    question: {
      props: {
        stem: String,
        options: Array,
        answer: String
      },
      computed: {
        proxyAnswer: {
          get() {
            return this.answer;
          },
          set(newValue) {
            this.$emit('update:answer', newValue);
          }
        }
      },
      components: {
        qRadio: {
          props: ['value', 'val'],
          computed: {
            proxyValue: {
              get() {
                return this.value;
              },
              set(newValue) {
                this.$emit('input', newValue);
              }
            }
          }
        }
      }
    }
  },
  methods: {
    clearSelection() {
      this.userChoice = {};
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app">
  <question stem="What is your favourite colour?" :options="options" :answer.sync="userChoice" inline-template>
    <div>
      <h5>{{stem}}</h5>
      <div class="option" v-for="opt in options">
        <div>Answer={{answer && answer.text}}, option={{opt.text}}</div>
        <label>
        <q-radio :val="opt" v-model="proxyAnswer" inline-template>
          <input type="radio" :value="val" v-model="proxyValue">
        </q-radio>
        {{opt.text}}
      </label>
      </div>
    </div>
  </question>
  <button @click="clearSelection">Clear</button>
</div>

언급URL : https://stackoverflow.com/questions/44394625/2-way-binding-in-vue-2-3-component