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

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

Vue.js에서 양방향 바인딩을 사용하면 하위 구성 요소가 상위 구성 요소의 속성입니다. 그러나 Vue 2.0이 출시되면서 이벤트 중심 아키텍처를 선호하는 양방향 바인딩이 더 이상 사용되지 않습니다.

해결책: 이벤트 중심 통신

In 이 접근 방식에서는 하위 구성 요소가 업데이트된 값으로 이벤트를 발생시킵니다. 그러면 상위 구성 요소가 이러한 이벤트를 처리하고 그에 따라 데이터를 수정합니다. 예를 들어, 텍스트 입력을 사용하여 사용자 정의 하위 구성 요소를 만들어 보겠습니다.

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

상위 값 업데이트

하위 구성 요소에서는 updateValue 메서드가 항상 호출됩니다. 입력값이 변경됩니다. 이 메소드는 업데이트된 값을 인수로 전달하여 '입력' 이벤트를 발생시킵니다.

상위 Vue 인스턴스에서 이벤트 수신

상위 Vue 인스턴스에서:

<code class="javascript">new Vue({
  el: '#app',
  data: {
    parentValue: 'hello'
  },
  methods: {
    handleInput(value) {
      this.parentValue = value;
    }
  }
});</code>

v-model을 사용한 바인딩

Vue.js는 v-model이라는 양방향 바인딩을 위한 편리한 약어를 제공합니다. 양식 요소에서 v-model을 사용하면 해당 요소가 상위 구성 요소의 지정된 속성에 자동으로 바인딩됩니다. 아래 코드는 이를 보여줍니다.

<code class="html"><child v-model="parentValue"></child></code>

이 예에서 하위 구성 요소의 value 속성은 상위 구성 요소의 parentValue 속성에 바인딩됩니다. 하위 구성 요소의 입력을 변경하면 상위 구성 요소의 parentValue가 자동으로 업데이트됩니다.

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