어떻게 Vue 공공 구성 요 소 를 추상 화 합 니까?

추상 적 인 Vue 구성 요소 에 관 한 에 세 이 를 쓰 고 싶 었 는데 어 쩔 수 없 이 좋 은 예 를 생각 하지 못 했다.공교롭게도 최근 에 회사 프로젝트 를 위해 디지털 키보드 의 구성 요 소 를 만 들 었 기 때문에 이 를 예 로 들 어 Vue 의 구성 요 소 를 추상 화 하 는 방법 에 대해 이야기 했다.
먼저Demo와소스 코드.demo 는 브 라 우 저 에서 모 바 일 모드 로 탐색 하 는 것 이 좋 습 니 다)
구체 적 으로 실현 되 기 전에 저 는 이상 적 인 공용 구성 요소 가 어떤 것 인지 먼저 공유 하고 싶 습 니 다.
1.블랙박스 성,즉 당신 자신 을 제외 한 다른 개발 자 들 은 문 서 를 빠르게 읽 고 사용 한 후에 바로 시작 할 수 있 으 며 내부 실현 에 관심 을 가지 지 않 아 도 됩 니 다.
2.독립 성,즉 디 결합 을 잘 하여 부모 구성 요소 와 너무 많은 관련 이 없 음;
3.사용자 정의 성,입력 인터페이스 나 방법 을 외부 에 적당 하 게 노출 하여 사용자 정의 에 사용 하 는 동시에 이 속성 들 이 외부 에 입력 되 지 않 았 을 때의 기본 값 도 설정 해 야 합 니 다. 
다음은 데모 의 디지털 키보드 구성 요소 가 어떻게 호출 되 는 지 블랙 박스 방식 으로 살 펴 보 겠 습 니 다.
App.vue

<template>
......
  <keyboard @submit-event='handleSubmit' @change-event='handleChange'></keyboard>
</template>
<script>
import keyboard from 'Keyboard.vue';
export default {
  data() {
    return {
      value: ''
    };
  },
  methods: {
    handleChange(value, currentValue) {
      console.log(value, currentValue);
      this.value = value;
    },
    handleSubmit() {
      console.log('submit: ' + this.value);
    }
  }
}
</script>

위 와 같이 가장 기본 적 인 호출 이 완성 되 었 다.효 과 는 다음 과 같 습 니 다:

이 어 1-6 과'확인'을 클릭 했다.다음 과 같다 면:

디지털 키보드 가 우리 가 예상 한 대로 작 동 하 는 것 을 볼 수 있 습 니 다.다음은 이 디지털 키보드 구성 요소 의 모든 입력 항목 을 분석 해 보 겠 습 니 다.
@change-event:이 이 벤트 는 사용자 정의 이벤트 입 니 다.부모 구성 요 소 는 v-on 을 통 해 감청 되 고 하위 구성 요소 내 부 는$emit 를 통 해 실 행 됩 니 다(더 많은 사용자 정의 이벤트 관련 내용 은 Vue 공식 튜 토리 얼 참조).
매번 디지털 버튼 과 체크 키 를 누 르 면 이 사건 이 발생 합 니 다.두 개의 매개 변 수 를 전달 합 니 다:value,누 른 문자 조합;현재 클릭 한 문자 입 니 다.부모 구성 요 소 는 handle Change 방법 을 통 해 이 사건 의 반전 내용 을 받 습 니 다.
@submit-event:"확인"키 를 누 르 면 이 사건 이 발생 합 니 다.파 라 메 터 를 전달 하지 않 고 부모 구성 요소 에 게"내 확인 버튼 이 클릭 되 었 습 니 다.무엇 을 하 시 겠 습 니까?알 아서 하 세 요.전에 누 른 숫자 는 change-event 를 통 해 전 달 됐 습 니 다"라 고 만 알려 줍 니 다.부모 구성 요 소 는 handle Submit 방법 으로 리 셋 을 받 습 니 다.
만약 이 두 가지 방법 만 쓴다 면 너무 성의 가 없 을 것 입 니 다.저 는 일부 장면 에 따라 다음 과 같은 몇 가지 사용자 정의 속성 을 작 성 했 습 니 다.
max:최대 입력 길이,초과 한 부분 은 change-event 이벤트 가 발생 하지 않 습 니 다.기본 값 은 제한 이 없습니다.

<keyboard max='6'></keyboard>

sp-key:사용자 정의 특수 문자,예 를 들 어 신분증 입력 시의"X"는 왼쪽 아래 공백 칸 에 추 가 됩 니 다.기본 값 은 없습니다.

<keyboard sp-key='X'></keyboard>

random:숫자 순 서 를 어 지 럽 히 는 지,은행 계좌 나 비밀번호 에 대한 입력 은 이런 장면 을 자주 볼 수 있 습 니 다.기본 false 입 니 다.

<keyboard random='true'></keyboard>

위의 몇 개의 사용자 정의 속성 과 사건 에서 우 리 는 부모 구성 요소 가 어떻게 하위 구성 요소 에 값 을 전달 하고 하위 구성 요소 의 변 화 를 감청 하 는 지 대충 알 았 습 니 다.그러나 부모 구성 요 소 는 어떻게 하위 구성 요소 내부 의 함 수 를 직접 호출 해 야 합 니까?우 리 는 아래 의 이 장면 을 보 았 다.
디지털 키보드 의 키보드 아이콘 은 클릭 하면 디지털 키 보드 를 거두 어 숨 깁 니 다.구성 요소 내부 에 키보드 의 팝 업 과 회 수 를 제어 하 는 방법 이 있 습 니 다.구성 요소 외부 에서 도 이 방법 을 사용 하려 면?예 를 들 어 부모 구성 요소 의 input 가 초점 을 가 져 올 때.
Vue 의 ref 속성 을 통 해 키보드 의 구성 요소 인용 을 얻 을 수 있 으 며 내부 방법 을 호출 할 수 있 습 니 다.다음 과 같 습 니 다.
$refs.[refName].keyboardToggle(true|false)

<template>
  <input type='text' @focus='handleShowKeyboard($event)' />
  <keyboard ref='kbref'></keyboard>
</template>
<script>
import keyboard from 'Keyboard';
export default {
  //...
  methods: {
    handleShowKeyboard(e) {
      e && e.preventDefault();
      this.$refs.kbref.keyboardToggle(true);
    }
  }
}
</script>

위 와 같은 형식 으로 부모 구성 요소 컨 텍스트 에서 하위 구성 요소 내 방법 을 호출 할 수 있 습 니 다.
$refs.[refName].handleInit()
디지털 키보드 구성 요소 내부 의 초기 화 방법 은 구성 요 소 를 다시 렌 더 링 하 는 데 사 용 됩 니 다.random 속성 이 true 이면 숫자 키 는 무 작위 배열 을 새로 고 칩 니 다.
$refs.[refName].handleClear()
이전에 입력 한 문자 조합 을 지우 고 change-event 를 실행 하고 빈 문자열 을 되 돌려 줍 니 다.
위 에서 이 구성 요소 의 모든 대외 속성 과 사건 을 공 유 했 습 니 다.우 리 는 이 구성 요소 내부 의 코드 를 보지 못 했 지만 이 를 완전히 사용 할 수 있 습 니 다.다음은 내부 실현 에 대해 이야기 하 겠 습 니 다.
먼저 레이아웃 을 살 펴 보 겠 습 니 다.저 는 키 보드 를 좌우 두 부분 으로 나 누 었 습 니 다.오른쪽 부분 은 더 이상 말 할 필요 가 없습니다.왼쪽 부분 은 하나의 키 배열 을 v-for 순환 을 통 해 생 성 하 는 것 입 니 다.

그렇다면 어떻게 0 과 9 사이 에 한 칸 을 비 울 수 있 을 까?키보드 구성 요 소 를 초기 화 하 는 방법 을 살 펴 보 자.
keyboard.vue
handleInit()

<template>
  <div>
    <div class='kb-left'>
      <div class='kb-item' v-for='item in keyArr'>{{item}}</div>
      <div class='kb-item kb-toggle'></div> //    
    </div>
    <div class='kb-right'>
      //...    
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      baseArr: []
    }
  },
  computed: {
    keyArr() {
      this.handleInit();
      return this.baseArr;
    }
  },
  methods: {
    handleInit() {
      this.baseArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
      this.baseArr.splice(this.baseArr.length - 1, 0, '');
    }
  }
}
</script>

즉,키 배열 의 마지막 두 번 째 자리 에 빈 문 자 를 삽입 한 다음 순환 하여 버튼 을 생 성 하 는 것 이다.사용자 정의 매개 변수 가 어떻게 적용 되 는 지 살 펴 보 겠 습 니 다.
sp-key

<script>
export default {
  props: ['spKey'],
  data() {
    return {
      baseArr: []
    }
  },
  //....
  methods: {
    handleInit() {
      let spKey = this.spKey;
      this.baseArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];

　　　　　　　this.baseArr.splice(this.baseArr.length - 1, 0, spKey);
    }
  }
}
</script>

구성 요소 내부 에서 props 속성 을 통 해 부모 구성 요소 가 전달 하 는 spKey 를 받 은 후 구성 요소 내 속성 과 방법 에서 this.spKey 를 통 해 접근 할 수 있 습 니 다.우선 spKey 값 이 유효한 지 판단 하고 빈 문 자 를 대신 하여 키 배열 의 마지막 두 번 째 항목 을 삽입 합 니 다.
random

<script>
export default {
  props: ['spKey', 'random'],
  data() {
    return {
      baseArr: []
    }
  },
  //....
  methods: {
    handleInit() {
      let spKey = this.spKey;
      this.baseArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];

    　　if (this.random && this.random != 'false') {
      　　this.baseArr.sort(function() {
      　　　return Math.random() - Math.random();
    　　　　});
      }

      this.baseArr.splice(this.baseArr.length - 1, 0, spKey);
    }
  }
}
</script>

키 순 서 를 흐 트 러 뜨리 는 것 도 간단 하 다.배열 의 sort 방법 만 통과 하면 된다.sort 방법 은 함수 하 나 를 매개 변수 로 받 아들 일 수 있 습 니 다.함수 가 정 수 를 되 돌려 주면 앞 뒤 두 항목 의 위 치 를 교환 하고 함수 가 음 수 를 되 돌려 주면 교환 하지 않 습 니 다.따라서 두 개의 무 작위 수 를 상쇄 한 결 과 를 되 돌려 주면 키 배열 을 무 작위 로 정렬 할 수 있다.
구성 요소 내부 에서 change-event 를 어떻게 터치 하 는 지 살 펴 보 겠 습 니 다.
handleInput()

<template>
  <div>
    <div class='kb-left'>
      <div @click='handleInput(item)' class='kb-item' v-for='item in keyArr'>{{item}}</div>
      <div class='kb-item kb-toggle'></div> //    
    </div>
    //...
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputStr: ''
    }
  },
  //...
  methods: {
    handleInput(value) {
      this.inputStr += value;
      this.$emit('change-event', this.inputStr, value);
    }
  }
}
</script>

max 속성 이 증가 한 후 수정 방법 은 다음 과 같 습 니 다:

handleInput(value) {
  let max = Number(this.max);
  if (!isNaN(max) && this.inputStr.length+1 > max) {
    return;
  }

  this.inputStr += value;
  this.$emit('change-event', this.inputStr, value);
}

마지막 으로 퇴 격 삭제 가 어떻게 이 루어 지 는 지 살 펴 보 자.
handleDelete()

handleDelete() {
  let str = this.inputStr;
　　 if (!str.length) return;

  this.inputStr = str.substring(0, str.length - 1);
  this.$emit('change-event', this.inputStr);
} 

위의 예 는 모두 핵심 코드 의 세 션 이 고 다른 보조 함수 가 열거 되 지 않 았 습 니 다.완전한 코드 를 보 려 면소스 코드을 보십시오.
 이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.