Vue 2방향 프로펠러 바인딩

Vue 2방향 프로펠러 바인딩

아래는 나의 현재 구조(잘 안 된다)이다.

상위 구성 요소:

<template>
<field-input ref="title" :field.sync="title" />
</template>

<script>
import Field from './input/Field'
export default {
  components: {
    'field-input': Field
  },
  data() {
    return {
      title: {
        value: '',
        warn: false
      }
    }
  }
}
</script>

하위 구성 요소:

<template>
<div>
  <input type="text" v-model="field.value">
  <p v-bind:class="{ 'is-invisible' : !field.warn }">Some text</p>
</div>
</template>

<script>
export default {
  props: ['field']
}
</script>

요구사항은 다음과 같다.

• 상위 데이터의 경우title.warn부모의 가치 변화, 자녀의 가치class바인드는 업데이트되어야 한다(field.warn).
• 아이라면<input>업데이트됨(field.value)) 다음은 부모의 것이다.title.value업데이트되어야 한다.

이것을 달성하기 위한 가장 깨끗한 해결책은 무엇인가?

하위 구성 요소의 바인딩 안 함<input>부모에게title.value(좋다)<input type="text" v-model="field.value">이것은 앱의 데이터 흐름을 이해하기 훨씬 어렵게 만들 수 있는 알려진 나쁜 관행이다.

요구사항은 다음과 같다.

• 상위 데이터의 경우title.warn부모의 가치 변화, 자녀의 가치class바인드는 업데이트되어야 한다(field.warn).

은 간단하다, 하다만 만드세요. 그냥 다음 항목을 만드십시오.warn부모에게서 자식에게로 그것을 떠받치다

부모(자녀에게 소품 전달):

<field-input ref="title" :warn="title.warn" />

하위/템플릿(프로펠러 사용 - 판독 전용):

<p v-bind:class="{ 'is-invisible' : !warn }">Some text</p>

Child/JavaScript(프로펠러 및 예상 유형 선언):

export default {
  props: {warn: Boolean}
}

템플릿에는 다음과 같은 항목이!warn, 아니다.!title.warn또한, 당신은 선언해야 한다.warn로서Boolean그렇지 않으면 부모가 문자열을 사용할 수 있기 때문이다(예:<field-input warn="false" />예상치 못한 결과를 산출할 수 있는 ( )!"false"은 ~이다false, 아니다.true).

• 아이라면<input>업데이트됨(field.value)) 다음은 부모의 것이다.title.value업데이트되어야 한다.

여기 몇 가지 가능한 옵션이 있지만, 이 경우에 가장 깨끗한 해결책은 부모에게 소품을 만들어 사용하는 것이라고 나는 주장한다.

상위(프로펠러 바인딩 방법)v-model):

<field-input ref="title" v-model="title.value" />

어린이/템플릿(프로펠러를 초기 값으로 사용 및 배출)input변경 시 이벤트 수:

<input type="text" :value="value" @input="$emit('input', $event.target.value)">

Child/JavaScript(프로펠러 및 예상 유형 선언):

export default {
  props: {value: String}
}

두 솔루션에 대한 작업 데모를 보려면 여기를 클릭하십시오.

양방향 데이터 바인딩을 달성하는 방법에는 몇 가지가 있다.

1. 구성요소에 특성 사용
2. v-model 특성 사용
3. 동기화 한정자 사용
4. Vuex 사용

양방향 바인딩의 경우 문서로부터 인용한 대로 유지하기가 어려운 일련의 돌연변이를 일으킬 수 있다는 점을 명심하십시오.

불행히도, 진정한 양방향 결합은 유지보수에 문제를 일으킬 수 있다. 왜냐하면 자식 구성 요소는 부모와 자식 모두에게 그러한 돌연변이의 원인이 명백하지 않은 상태에서 부모를 변이시킬 수 있기 때문이다.

다음은 사용 가능한 방법에 대한 몇 가지 세부사항이다.

1.) 부품에 소품 사용

양방향 바인딩에 소품을 사용하는 것은 일반적으로 권장되지는 않지만 가능한데, 객체 또는 어레이를 전달함으로써 해당 객체의 속성을 변경할 수 있으며, 콘솔에 경고를 인쇄하지 않고도 하위 개체와 상위 개체에서 모두 관찰될 수 있다.

상위 구성요소가 업데이트될 때마다 하위 구성요소의 모든 소품은 최신 값으로 새로 고쳐진다.즉, 어린이 구성 요소 내부의 받침대를 변이하지 마십시오.

소품은 사용하기 쉽고 가장 일반적인 문제를 해결하는 이상적인 방법이다.
Vue가 관찰하는 변화 때문에 모든 속성은 개체에서 사용할 수 있어야 하며 그렇지 않으면 반응하지 않는다.Vue가 관측 가능한 'set'를 만든 후에 어떤 특성이 추가되면, 그것을 사용해야 할 것이다.

 //Normal usage
 Vue.set(aVariable, 'aNewProp', 42);
 //This is how to use it in Nuxt
 this.$set(this.historyEntry, 'date', new Date());

개체는 구성 요소와 부모 모두에 대해 반응한다.

물체/어레이를 소품으로 전달하면 자동으로 양방향 동기화가 이루어지며, 자녀의 데이터가 변경되고, 부모의 데이터가 변경된다.

소품을 통해 간단한 값(줄, 숫자)을 전달하면 .sync 수식어를 명시적으로 사용해야 한다.

https://stackoverflow.com/a/35723888/1087372에서 인용한 바와 같이.

2.) v-model 속성 사용

v-model 속성은 부모와 자식 간의 양방향 결합을 용이하게 하는 통사설탕이다.동기식 수식어가 바인딩에 특정 프로펠러와 특정 이벤트만 사용하는 것과 동일한 작업을 수행한다.

다음 내용:

 <input v-model="searchText">

다음과 같다.

 <input
   v-bind:value="searchText"
   v-on:input="searchText = $event.target.value"
 >

프로펠러가 값이어야 하고 이벤트가 입력되어야 하는 경우

3.) 동기화 수식어 사용

동기식 수식어는 또한 통사설탕이며 v-모델과 동일하게 작용하는데, 단지 소품 및 이벤트 이름은 사용 중인 모든 것에 의해 설정된다는 것이다.

부모에서는 다음과 같이 사용할 수 있다.

 <text-document v-bind:title.sync="doc.title"></text-document>

자식으로부터 이벤트를 내보내 부모에게 변경사항을 통지할 수 있다.

 this.$emit('update:title', newTitle)

4.) Vuex 사용

Vuex는 모든 구성 요소에서 액세스할 수 있는 상태 관리자.변경에 가입할 수 있다.

Vuex 저장소를 사용하면 데이터 돌연변이의 흐름을 보다 쉽게 볼 수 있으며 이러한 돌연변이는 명시적으로 정의된다.vue 개발자 도구를 사용하면 변경 내용을 쉽게 디버그하고 롤백할 수 있다.

이 접근방식은 좀 더 많은 보일러가 필요하지만, 프로젝트 전체에 걸쳐 사용된다면, 어떻게 변경되고 어디서부터 변경되는지를 정의하는 훨씬 더 깨끗한 방법이 된다.

시작 안내서 참조

참조URL: https://stackoverflow.com/questions/48979636/vue-two-way-prop-binding