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>
이 예에서는
이 이벤트 기반 접근 방식을 사용하면 분리된 모듈식 구성 요소 아키텍처를 유지하면서 상위-하위 데이터 업데이트를 효과적으로 관리할 수 있습니다.
위 내용은 Vue.js에서 상위 구성 요소와 하위 구성 요소 간에 데이터 업데이트를 어떻게 전달할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!