Vue 사용자 정의 구성 요소 양 방향 바 인 딩 실현 원리 및 방법 상세 설명

머리말
어떠한 언어 나 구조 에서 도 우 리 는 코드 의 재 활용 성 을 제창한다.Vue 에 게 도 마찬가지 로 같은 코드 논 리 는 구성 요소 로 봉 인 될 수 있 으 며,재 활용 외 에 도 통일 적 인 관리 로 개발 효율 을 높이 는 것 이 중요 하 다.나 는 정말 하나의 항목 을 인수 한 적 이 있다.여러 페이지 가 사용 할 수 있 는 목록 은 목록 구성 요 소 를 봉인 하지 않 았 다.조금 만 바 뀌 면 모든 페이지 를 추가 해 야 한다.모듈 화 되 지 않 은 Vue 프로젝트 는 영혼 이 없다 는 것 은 분명 하 다.그래서 우아 하고 재 활용 성 이 높 은 구성 요 소 를 어떻게 포장 하 느 냐 가 우리 에 게 필요 한 기능 이 되 었 습 니 다.
탭 사용자 정의 구성 요소
먼저 Tab 구성 요소 의 실현 을 살 펴 보고 어떤 문제 가 있 는 지,어디서 개선 할 수 있 습 니까?
효과.

구성 요소

<template>
 <div class="tabs">
  <div 
   class="tab-item" 
   :class="{'tab--active':item===activeName}"
   v-for="(item,index) in tabs" 
   :key="index" 
   @click="tabChange(item)">
   {{item}}
  </div>
 </div>
</template>

<script>
export default {
 props:{
  tabs:{
   type: Array,
   default: ()=> []
  },
  activeName:{
   type: String,
   default: ''
  }
 },
 methods:{
  tabChange(item){
   this.$emit('tabChange',item)
  }
 },
}
</script>

쓰다

<template>
 <div>
  <Tabs :tabs="tabs" :activeName="activeName" @tabChange="tabChange" />
 </div>
</template>

<script>
import Tabs from '../components/Tabs'
export default {
 components:{
  Tabs
 },
 data(){
  return{
   tabs:['    ','    ','    ','    ','    '],
   activeName: '    '
  }
 },
 methods:{
  tabChange(item){
   this.activeName = item
  }
 },
}
</script>

이 구성 요소 의 가장 큰 문 제 는 activeName 사용자 가 이 벤트 를 통 해 수 동 으로 업데이트 해 야 한 다 는 것 입 니 다.만약 다른 사용자 가 인수 한다 면 이 를 모 르 고 사용 하면 tab 가 전환 되 지 않 은 상황 이 발생 할 수 있 습 니 다.그리고 구성 요소 내부 의 실현 을 보고 코드 를 수정 해 야 합 니 다.이러한 구성 요 소 는 실패 한 것 이 분명 합 니 다.모든 더러 운 일 은 구성 요소 에 의 해 이 루어 진 다 는 원칙 에 따라 이상 적 인 상 태 는 사용자 가 activeName 을 관리 하지 않 고 구성 요소 내부 에서 업데이트 하 는 것 이 어야 합 니 다.
어떻게 prop 수정 을 개선 합 니까?
내부 관리 가 필요 하 다 면 구성 요소 내부 에서 prop 의 값 을 수정 하면 되 지 않 을 까 하 는 생각 이 들 수도 있 습 니 다.이런 방법 이 실행 가능 한 지 를 살 펴 보 자.
구성 요소 tabChange 방법 을 수정 하고 클릭 할 때 prop 의 값 을 업데이트 합 니 다.

tabChange(item){
 this.activeName = item
 this.$emit('tabChange',item)
}

사용 시 콘 솔 에서 경 고 를 던 집 니 다.

prop 는 단 방향 데이터 흐름 이기 때문에 부모 prop 의 업 데 이 트 는 하위 구성 요소 로 아래로 이동 합 니 다.반대로 하위 구성 요소 내부 에서 직접 업 데 이 트 된 상 태 는 데이터 의 흐름 이 명확 하지 않 습 니 다.예 를 들 어 부모 구성 요소 중 여러 개의 하위 구성 요소 가 같은 속성 에 의존 하고 있 습 니 다.그 중 한 개의 하위 구성 요소 가 이 속성 을 업데이트 하면 나머지 하위 구성 요소 가 바 뀌 고 문제 가 발생 했 을 때 쉽게 찾 을 수 없 기 때문에 Vue 는 이렇게 하 는 것 을 추천 하지 않 습 니 다.또한 부모 구성 요소 가 업데이트 되 었 을 때 하위 구성 요소 의 prop 는 최신 값 으로 갱 신 됩 니 다.
단 방향 데이터 흐름:  https://cn.vuejs.org/v2/guide/components-props.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81
정 해:model 옵션 개선 구성 요소
모듈 모델 옵션
사용자 정의 구성 요소 가 v-model 을 사용 할 때 prop 와 이 벤트 를 맞 출 수 있 도록 합 니 다.기본 적 인 상황 에서 한 구성 요소 의 v-model 은 value 를 prop 로 사용 하고 input 을 이벤트 로 사용 하지만,일부 입력 유형 은 체크 상자 와 체크 상자 단 추 를 사용 하여 서로 다른 목적 을 달성 하려 고 할 수 있 습 니 다.model 옵션 을 사용 하면 이러한 상황 에서 발생 하 는 충돌 을 피 할 수 있 습 니 다.
model: https://cn.vuejs.org/v2/api/
model 옵션 에서 속성 을 연결 하고 이 벤트 를 추가 할 수 있 습 니 다.호출 방법 에 값 을 입력 하면 속성 을 업데이트 할 수 있 습 니 다.

<script>
export default {
 model:{
  prop: 'activeName',
  event: 'update'
 },
 props:{
  tabs:{
   type: Array,
   default: ()=> []
  },
  activeName:{
   type: String,
   default: ''
  }
 },
 methods:{
  tabChange(item){
   this.$emit('update',item) //     activeName
   this.$emit('tabChange',item)
  }
 }
}
</script>

구성 요소 의 props 옵션 에서 prop 를 설명 해 야 합 니 다.
쓰다
구성 요소 의 양 방향 연결 을 사용 하면 구성 요소 내부 에서 속성 이 업 데 이 트 될 때 부모 구성 요소 의 activeName 도 이에 따라 업 데 이 트 됩 니 다.사용자 가 데이터 가 수 정 될 수 있다 는 것 을 명확 하 게 알 수 있 습 니 다.<Tabs :tabs="tabs" v-model="activeName" />총결산
구성 요소 의 model 옵션 을 사용 하여 사용자 정의 구성 요소 의 양 방향 연결 을 실현 합 니 다.구성 요소 내부 에서 이벤트 로 속성 값 을 업데이트 합 니 다.이러한 사용자 정의 구성 요 소 는 사용 하기에 더욱 우아 합 니 다.사실 model 옵션 을 통 해 부모 급 속성 을 수정 하 는 것 은 단 방향 데이터 흐름 의 원칙 에 약간 위배 된다 고 생각 합 니 다.원래 단 방향 데이터 흐름 은 하위 급 이 부모 급 속성 을 수정 하 는 것 을 허용 하지 않 습 니 다.v-model 의 문법 설탕 만 사용 하면 데이터 흐름 을 더욱 명확 하 게 보이 고 이 단점 을 보완 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.