Vue2 상위 구성 요소와 하위 구성 요소 간의 양방향 바인딩을 구현하는 방법

이번에는 Vue2 상위 컴포넌트와 하위 컴포넌트의 양방향 바인딩을 구현하는 방법을 보여 드리겠습니다. notes는 무엇인가요?

최근 Vue2를 기반으로 UI 컴포넌트 세트를 작성하는 방법을 연구하던 중 양방향 바인딩을 구현하기 위해 Vuex를 사용하려고 생각했지만 다른 우수한 UIframeworks를 관찰한 결과 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: 'NeIpt', 
  props: { 
   // 接收一个由父级组件传递过来的值 
   value: { 
    type: String, 
    default: function () { 
     return '' 
    } 
   } 
  }, 
  computed:{ 
   currentValue: { 
    // 动态计算currentValue的值 
    get:function() { 
     return this.value; // 将props中的value赋值给currentValue 
    }, 
    set:function(val) { 
     this.$emit('input', val); // 通过$emit触发父组件 
    } 
   } 
  } 
 } 
</script>

상위 구성 요소 코드 논리

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

하위 구성 요소의 currentValue를 수정하면 $emit을 통해 실제로 input 이벤트가 트리거되고 해당 값이 호출자의 v-model에 전달되므로 양방향 바인딩이 달성됩니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Django에서 파일 다운로드 기능을 구현하는 방법

vue에서 로컬 정적 이미지를 참조하는 방법

위 내용은 Vue2 상위 구성 요소와 하위 구성 요소 간의 양방향 바인딩을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!