Vue 2.0 v-model 을 이용 하여 구성 요소 props 양 방향 연결 을 실현 하 는 아름 다운 솔 루 션

프로젝트 에서 vue 2 를 사용 하여 프로젝트 를 구축 하기 시 작 했 습 니 다.vue 1 과 큰 차이 점 은 2 가 props 의 양 방향 바 인 딩 을 취소 하고 부모 급 에서 하위 급 으로 만 전 달 될 수 있 는 단 방향 데이터 흐름 으로 바 꾸 었 습 니 다.취 지 는 당연히 좋 습 니 다.양 방향 바 인 딩 이 프로젝트 에 쉽게 발생 하 는 데이터 가 혼 란 스 럽 지 않도록 하 는 것 입 니 다.
해결 방안
그리고 인터넷 과 github 의 방안 등 을 참고 하기 시 작 했 는데 많은 해결 방안 이 이 렇 습 니 다.

data 대상 으로 props 속성 던 전 만 들 기

watch props 속성 은 data 던 전 을 부여 하여 구성 요소 외 props 에 대한 수정 을 동기 화 합 니 다

watch data 던 전,emit 함수 하나 가 구성 요소 밖으로 알림

여기 서 가장 흔히 볼 수 있 는 modal 을 예 로 들 면 modal 은 양 방향 연결 에 적합 합 니 다.외부 에 서 는 구성 요소 의 표시 나 숨 김 을 제어 할 수 있 습 니 다.구성 요소 내부 의 닫 기 는 visible 속성 숨 김 을 제어 할 수 있 고 visible 속성 은 외부 로 동기 화 전송 할 수 있 습 니 다.

///modal.vue   
<template>
 <div class="modal" v-show="visible">
  <div class="close" @click="cancel">X</div>
 </div>
</template>

<script>
export default {
 name:'modal',
 props: {
  value: {
  type: Boolean,
  default:false
  }
 },

 data () {
 return {
  visible:false
 }
 },
 watch:{
  value(val) {
  console.log(val);
  this.visible = val;
  },
  visible(val) {
  this.$emit("visible-change",val);
  }
 },
 methods:{
 cancel(){
  this.visible = false;
 }
 },
 mounted() {
 if (this.value) {
  this.visible = true;
 }
 }
}
</script>


///  modal  
<modal :value="isShow" @visible-change="modalVisibleChange"></modal>

export default {
 name: 'app',
 data () {
 return {
  isShow:true,
 }
 },
 methods:{
  modalVisibleChange(val){
  this.isShow = val;
  }
 }
}

이렇게 하면 구성 요소 props 의 양 방향 연결 문 제 를 해결 할 수 있 습 니 다.그러나 이러한 그다지 아름 답지 않 은 현상 은 부모 급 에서 modal 구성 요 소 를 호출 할 때 modal VisibleChange 의 methods 를 써 야 한 다 는 것 이다.항상 이 부분 코드 는 불필요 해 보인다.특히 다른 사람 이 사용 할 수 있 는 공공 구성 요 소 를 쓰 는 것 은 너무 번거롭다.method 를 쓰 지 않 고 props 의 양 방향 연결 을 실현 할 수 있 습 니까?답 은 가능 합 니 다.
아름 다운 해결 방안
그것 은 v-model 을 이용 하여 구성 요소 내부 에 숨겨 진 input 컨트롤 을 설치 하여 v-model 의 값 을 저장 하고 양 방향 으로 연결 하 는 것 입 니 다.
다음 코드 로 변경:

<template>
 <div class="modal" v-show="visible">
  <div class="close" @click="cancel">X</div>
  <input type="text" :value="value" style='display:none;'>
 </div>
</template>

<script>
export default {
 props: {
  value: {
  type: Boolean,
  default:false
  }
 },

 data () {
 return {
  visible:false
 }
 },
 watch:{
  value(val) {
  console.log(val);
  this.visible = val;
  },
  visible(val) {
  this.$emit('input', val);
  }
 },
 methods:{
 cancel(){
  this.visible = false;
 }
 },
 mounted() {
 if (this.value) {
  this.visible = true;
 }
 }
}
</script>


///  modal  

 <modal v-model="isShow"></modal>

export default {
 name: 'app',
 data () {
 return {
  isShow:false
 }
 }
}
</script>

이렇게 구성 요 소 를 호출 하 는 코드 가 간결 하지 않 습 니까?다른 사람 이 호출 하려 면 쉽게 사용 할 수 있 습 니 다.isShow 를 설정 하면 modal 구성 요소 의 표시 나 숨 김 을 제어 할 수 있 습 니 다.또한 modal 구성 요소 내부 닫 기 버튼 이 닫 히 면 상태 도 isShow 로 전 달 됩 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.