Vue.js에서 상위 구성 요소와 하위 구성 요소 간에 데이터 업데이트를 어떻게 전달할 수 있나요?

Vue.js에서 상위-하위 데이터 업데이트 전달

Vue.js의 세계를 탐구하다 보면 상황에 직면하게 됩니다. 하위 구성요소의 데이터를 상위 구성요소로 업데이트해야 하는 경우 Vue 1.x에서는 양방향 바인딩이 널리 사용되었지만 Vue 2.x에서는 이벤트 중심 접근 방식을 선호하여 더 이상 사용되지 않습니다.

Vue 2.0에서 상위와 하위 간의 데이터 업데이트를 처리하려면 v-model을 통해 맞춤형 구성요소를 활용할 수 있습니다. V-model은 Vue가 채택한 이벤트 중심 아키텍처에 대한 편리한 단축키를 제공하는 특수 구문입니다.

다음 예를 고려하세요.

<code class="js">Vue.component('child', {
  template: '#child',
  props: ['value'],
  methods: {
    updateValue: function (value) {
      this.$emit('input', value);
    }
  }
});

new Vue({
  el: '#app',
  data: {
    parentValue: 'hello'
  }
});</code>

<code class="html"><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

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

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

이 예에서는

• 하위 컴포넌트에는 v-model을 통해 상위 컴포넌트의 데이터 속성과 동기화되는 value라는 prop이 있습니다.
• 사용자가 하위 컴포넌트의 입력 필드에 입력하면 updateValue 메서드가 트리거됩니다.
• updateValue 메서드는 업데이트된 값으로 상위 구성 요소에 입력 이벤트를 내보냅니다.
• 상위 구성 요소는 입력 이벤트를 수신하고 이에 따라 자체 parentValue 데이터 속성을 업데이트합니다.

이 이벤트 기반 접근 방식을 사용하면 분리된 모듈식 구성 요소 아키텍처를 유지하면서 상위-하위 데이터 업데이트를 효과적으로 관리할 수 있습니다.

위 내용은 Vue.js에서 상위 구성 요소와 하위 구성 요소 간에 데이터 업데이트를 어떻게 전달할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!