Vue2.x의 상위 구성요소와 하위 구성요소의 양방향 바인딩 정보(자세한 튜토리얼)

이 글에서는 주로 Vue2 간의 양방향 바인딩 문제를 해결하는 방법을 소개합니다. BIG를 개선하기 위해 입력이 포함된 구성 요소를 만들 때 문제가 발생했습니다. 자식 컴포넌트와 호출자(부모 컴포넌트)의 데이터를 Vuex를 사용해볼까 고민하다가, 다른 훌륭한 Framework들을 보다가 Vuex를 사용하면 다른 사용자들에게 문제를 일으킬 수 있다는 것을 알게 되어서 해결 방법을 찾아보기로 했습니다. 여러 전문가들의 글을 보다가 드디어 찾았습니다.

저는 Vue 프레임워크를 처음 접하는 저와 같은 동료들에게 도움이 되기를 바라며 여기에 솔루션을 게시하고 있습니다.

하위 컴포넌트의 코드 로직

<template> 
 <p class="ne-ipt"> 
  <input type="text" v-model="currentValue"> 
 </p> 
</template> 
 
<style lang="less" scoped> 
 @import "../../assets/styles/form/form.less"; 
</style> 
<script> 
 export default { 
  name: &#39;NeIpt&#39;, 
  props: { 
   // 接收一个由父级组件传递过来的值 
   value: { 
    type: String, 
    default: function () { 
     return &#39;&#39; 
    } 
   } 
  }, 
  computed:{ 
   currentValue: { 
    // 动态计算currentValue的值 
    get:function() { 
     return this.value; // 将props中的value赋值给currentValue 
    }, 
    set:function(val) { 
     this.$emit(&#39;input&#39;, val); // 通过$emit触发父组件 
    } 
   } 
  } 
 } 
</script>

상위 컴포넌트의 코드 로직

<template> 
 <p id="button-index"> 
  <ne-ipt placeholder="姓名" v-model="test"></ne-ipt> 
 </p> 
</template> 
<style> 
</style> 
<script> 
 import NeIpt from &#39;./NeIpt&#39; 
 export default { 
  name: &#39;form-index&#39;, 
  data () { 
   return { 
    test: &#39;&#39; 
   } 
  }, 
  components: { 
   NeIpt 
  } 
 } 
</script>

하위 컴포넌트의 currentValue를 수정할 때 입력 이벤트는 실제로 $emit에 의해 트리거되고 값은 다음으로 전달됩니다. 호출자의 v-모델을 사용하여 양방향 바인딩을 달성합니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue+element-ui+ajax를 사용하여 양식 인스턴스 구현

vue

Vue.js 사용자 정의 이벤트 양식으로 구성 요소를 등록하는 여러 방법 요약 입력 구성 요소 방법

위 내용은 Vue2.x의 상위 구성요소와 하위 구성요소의 양방향 바인딩 정보(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!