Vue.sync 를 사용 하여 부자 구성 요소 의 양 방향 바 인 딩 데이터 문 제 를 실현 합 니 다.

3334 단어 vue부자 구성 요소양 방향 바 인 딩sync
1.머리말
최근 vue 프로젝트 에서 필요 한 것 은 바로 제 가 서로 다른 유형 에 따라 페이지 에 서로 다른 구성 요 소 를 넣 어야 한 다 는 것 입 니 다.구성 요 소 는 현재 페이지 의 데이터 와 양 방향 으로 연결 해 야 합 니 다.만약 에 같은 페이지 에 쓰 면 코드 가 비교적 많아 보일 것 입 니 다.왜냐하면 제 가 현재 페이지 에 7-800 줄 코드 가 있 기 때문에 저 는 일부 요 소 를 구성 요소 로 정의 하고 포장 해 야 합 니 다.그래서 데이터 의 전송 값 바 인 딩 문제 에 부 딪 힐 수 있 습 니 다.
2.부모 구성 요소
우선 공식 문 서 를 살 펴 보 겠 습 니 다.[https://cn.vuejs.org/v2/guide/components.html#sync-수정자]
sync 수정자 가 제공 하 는 기능하위 구성 요소 가 prop 의 값 을 바 꿀 때 이 변 화 는 부모 구성 요소 에 연 결 된 것 과 동기 화 됩 니 다.
그 러 니까 우리 가 전달 해 야 할 prop 뒤에'sync'를 붙 일 수 있다 는 거 야.
예 를 들 어 제 가 밑 에 바 인 딩 이 필요 해 요.   p_model,그리고 나 는 그의 뒤에'sync'를 붙 였 다.

<certificate-input
    :p_model.sync='pname'>
 </certificate-input>
그 는 다음 과 같이 확장 할 것 이다.

 <certificate-input :p_model="pname" @update:p_model="val => pname= val"></certificate-input>
부모 구성 요소 모든 코드:

<template>
 <div>
 <certificate-input
    :p_model.sync='pname'
    :xi_model.sync="xiname">
 </certificate-input>
</div>
</template>
import CertificateInput from '../common/CertificateInput.vue'
export default {
 name: 'fathor',
 components: {
  CertificateInput 
 },
 data() {
  return {
   pname:"",
   xiname:""
 }  
}
하위 구성 요소
위 에서 큰 푸 시 구성 요소 라 고 했 는데 하위 구성 요소 가 어떻게 쓰 이 는 지 볼 까요?
제 프로젝트 에 vux 코드 를 사용 해서 바로 복사 해서 고 쳤 어 요.

<template>
 <div>
  <x-input
   title="  " 
   v-model="name" 
   ></x-input>
  <x-input title="    " 
    v-model="idCard" 
    placeholder="       "
    required>
  </x-input>
 </div>
</template>
<script type="text/javascript">
 import { XInput} from 'vux'
 export default{
  name:'certificateInput',
  props:["p_model","xi_model"],
  components:{
   XInput
  },
  data(){
   return{
    name:this.p_model,
    idCard:this.xi_model
   }
  },
  watch:{
  
   p_model(val) { 
    this.address = val;
   },
   name(val){
  //    ，        p_model
    this.$emit('update:p_model', val)
   },
   xi_model(val){
    this.certificate = val
   },
   idCard(val){
     this.$emit('update:xi_model', val)
   }
  }
 }
</script>
위 에서 볼 수 있다   하위 구성 요소 의 주요 코드 는 그의 변 화 를 감청 하고 부모 구성 요소 의 감청 을 촉발 하 는 사건 입 니 다.

 name(val){
  //    ，        p_model
    this.$emit('update:p_model', val)
}
됐어.위 가 내 방법 이 야.
되 게 낮 게 쓴 것 같 아 요.
앞으로 많이 개선 해 주세요.
총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 Vue 사용.sync 가 부자 구성 요소 의 양 방향 연결 데이터 문 제 를 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
Discuz security.inc.php 코드 에 대한 심도 있 는 분석
PHP 프로그래머 로 서 MongoDB 의 다섯 가 지 를 알 아야 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage