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

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

Vue.js 2.0에서는 기존의 양방향 바인딩이 이벤트 중심 아키텍처. 이는 하위 구성 요소가 소품을 직접 수정해서는 안 된다는 것을 의미합니다. 대신 이벤트를 내보내고 상위가 해당 이벤트에 응답할 수 있도록 해야 합니다.

하위 구성 요소에서 상위 데이터를 업데이트하려면 v-model과 함께 사용자 정의 구성 요소를 사용할 수 있습니다. 이 특수 구문은 이벤트 기반 접근 방식에 대한 단축형을 제공하므로 prop을 하위 구성 요소의 값에 직접 바인딩할 수 있습니다. 작동 방식은 다음과 같습니다.

1. 하위 구성 요소 만들기:

Vue.component('child', {
  template: '#child',
  props: ['value'],
  methods: {
    updateValue: function (value) {
      this.$emit('input', value);
    }
  }
});

• 값 소품은 하위 구성 요소가 생성하는 데이터입니다. 표시하고 수정합니다.
• updateValue 메서드는 하위 구성 요소의 입력 값이 변경될 때 호출됩니다. 입력 이벤트를 내보내고 새 값을 인수로 전달합니다.

2. 상위 Vue 인스턴스 생성:

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

• parentValue 데이터 속성은 상위 템플릿에 표시될 값을 보유합니다.

3. 하위 구성 요소에서 v-model 사용:

<child v-model="parentValue"></child>

• v-model을 사용하면 parentValue 데이터 속성과 하위 구성 요소의 prop 값 사이에 양방향 바인딩이 설정됩니다.

4. 상위 항목에서 입력 이벤트 처리:

하위 구성 요소에서 입력 값이 변경되면 updateValue 메서드가 입력 이벤트를 발생시킵니다. 상위 Vue 인스턴스에서 다음 코드를 사용하여 이 이벤트를 처리할 수 있습니다.

handleInputEvent(value) {
  this.parentValue = value;
}

이렇게 하면 하위 구성 요소의 입력 값이 변경될 때마다 parentValue 데이터 속성이 업데이트됩니다.

다음과 같이 하세요. 이러한 이벤트 기반 접근 방식을 사용하면 Vue.js 2.0의 하위 구성 요소에서 상위 데이터를 효과적으로 업데이트하고 깔끔한 모듈식 아키텍처를 유지할 수 있습니다.

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