Vue2의 상위 구성 요소와 하위 구성 요소 간의 양방향 바인딩-JS 튜토리얼-php.cn

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

php中世界最好的语言

풀어 주다： 2018-03-28 10:30:07

원래의

1377명이 탐색했습니다.

이번에는 Vue2의 상위 컴포넌트와 하위 컴포넌트 간의 양방향 바인딩에 대해 알려드리겠습니다. Vue2의 상위 컴포넌트와 하위 컴포넌트 간의 양방향 바인딩에 대한 노트는 무엇입니까? 한 번 보세요.

최근 Vue2를 기반으로 UI 구성 요소 집합을 작성하는 방법을 연구하고 있습니다. 데이터의 양방향 바인딩을 구현하기 위해 Vuex를 사용하려고 생각했지만 다른 우수한 UI 프레임워크를 관찰한 후 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!