v-model을 사용하여 Vue.js의 하위 구성 요소에서 상위 데이터를 업데이트하는 방법은 무엇입니까?

Vue.js의 하위 구성 요소에서 상위 데이터 업데이트

Vue.js에서는 상위 구성 요소와 하위 구성 요소 간의 데이터 흐름을 처리하는 것이 중요합니다. 효과적으로. 이 문서에서는 하위 구성 요소 내의 입력 필드에서 상위 데이터를 업데이트하려는 시나리오에 대해 설명합니다.

문제:

Vue.js 2.0 이상에서는 양방향 바인딩은 더 이상 사용되지 않습니다. props를 사용하여 상위 항목에서 하위 항목으로 데이터를 전달할 때 직접적인 prop 변형은 콘솔 경고로 이어질 수 있으므로 권장되지 않습니다.

해결책:

상위 항목을 업데이트하려면 데이터를 사용하는 경우 v-model과 함께 이벤트 중심 아키텍처 및 사용자 정의 구성 요소를 사용할 수 있습니다. V-model은 이벤트를 사용하여 상위와 하위 간에 통신하는 양방향 바인딩을 위한 구문을 제공합니다.

구현:

다음과 같은 템플릿을 사용하여 하위 구성 요소를 생성합니다. 입력 필드 포함:

<code class="html"><template id="child">
  <input type="text" v-bind:value="value" v-on:input="updateValue($event.target.value)">
</template></code>

하위 구성 요소의 스크립트에서 업데이트된 값으로 '입력' 이벤트를 내보내는 'value' prop과 'updateValue' 메서드를 추가합니다.

<code class="javascript">Vue.component('child', {
  template: '#child',

  props: ['value'],

  methods: {
    updateValue: function (value) {
      this.$emit('input', value);
    }
  }
});</code>

상위 뷰에서 상위 데이터로 Vue 인스턴스를 생성하고 v-model과 함께 하위 구성 요소를 사용합니다.

<code class="html"><div id="app">
  <p>Parent value: {{ parentValue }}</p>
  <child v-model="parentValue"></child>
</div></code>

하위 구성 요소의 입력 필드 값이 변경되면 'updateValue' 메소드가 호출되고 업데이트된 값이 '입력' 이벤트로 방출됩니다. 상위 Vue 인스턴스는 발생된 이벤트를 수신하고 그에 따라 'parentValue'를 업데이트합니다.

위 내용은 v-model을 사용하여 Vue.js의 하위 구성 요소에서 상위 데이터를 업데이트하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!