Vue.js에서 이벤트 기반 아키텍처로 상위 데이터를 업데이트하는 방법은 무엇입니까?

Vue.js에서 이벤트 기반 아키텍처로 상위 데이터 업데이트

Vue.js에서는 양방향 바인딩을 더 이상 사용할 수 없습니다. 버전 2.0은 더 이상 사용되지 않기 때문입니다. 대신 하위 구성 요소가 소품을 직접 조작해서는 안되는 이벤트 중심 아키텍처가 사용됩니다. 오히려 이벤트 생성을 사용하여 상위 구성 요소와 통신해야 합니다.

하위 구성 요소에서 상위 데이터를 업데이트하려는 경우 v-model과 함께 사용자 정의 구성 요소를 사용하는 것이 좋습니다. 이 특수 구문은 양방향 바인딩에 가까운 근사치를 제공하지만 이벤트를 사용하여 구현됩니다.

간단한 예는 다음과 같습니다.

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

  // The child has a prop named 'value'. v-model will automatically bind to this prop.
  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>

이 예에서는

• 하위 구성 요소에는 상위 구성 요소의 parentValue 데이터 속성에 바인딩된 v-model 지시문이 있습니다.
• 사용자가 하위 구성 요소의 입력 필드에 값을 입력하면 updateValue 메서드는 다음과 같습니다. 트리거됩니다.
• 이 메소드는 값을 매개변수로 사용하여 상위 구성 요소에서 처리하는 입력 이벤트를 내보냅니다.
• 상위 구성 요소는 상위 구성 요소에서 내보낸 값을 기반으로 parentValue 데이터 속성을 업데이트합니다. 하위 구성요소.

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