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

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

Barbara Streisand

풀어 주다： 2024-10-27 11:46:01

원래의

467명이 탐색했습니다.

How to Update Parent Data with Event-Driven Architecture in 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>

로그인 후 복사

이 예에서는