Vue 2.0 에서 구성 요소 click 이벤트 의 native 수식 을 제거 합 니 다.

2680 단어 vueclick.native
이것 은 구성 요소 개발 에서 발생 한 문제 입 니 다.당시 에 button 의 구성 요 소 를 만 들 고 있 었 습 니 다.템 플 릿 은 이 렇 습 니 다.

<template>
 <button class="disable-hover button ion-button"
     :class="[modeClass,typeClass,shapeClass,sizeClass,colorClass,roleClass,strongClass]">
  <span class="button-inner">
   <slot></slot>
  </span>
  <div class="button-effect"></div>
 </button>
</template>
사용 은 다음 과 같 습 니 다:

<ion-button @click.native="primary()" color="primary">primary</ion-button>
Vue 2.0 공식 문서 에서 부자 구성 요소 통신 에 관 한 원칙 에 따라 부모 구성 요 소 는 prop 을 통 해 하위 구성 요소 에 데 이 터 를 전달 하고 하위 구성 요소 가 부모 구성 요소 에 사건 을 촉발 합 니 다.그러나 부모 구성 요소 가 하위 구성 요소 에서 자신의 click 을 감청 하려 면 native 수식 자 를 추가 해 야 하기 때문에 위 와 같이 쓰 십시오.
좋아,처녀자리 의 결점 이 또 생 겼 어.button 처럼 자주 사용 하 는 구성 요소 에 native 를 더 하면 갑 작 스 러 운 느낌 입 니 다.구성 요소 디자인 은 자신 만 의 고려 가 있 기 때문에 click 의 native 를 제거 하고 싶 습 니 다.생각 은 다음 과 같 습 니 다.
  • 하위 구성 요소 가 부모 구성 요소 가 주 는 click 사건 을 감청 합 니 다.
  • 하위 구성 요소 내부 에서 click 사건 을 처리 한 후 외부 로 click 사건 을 보 냅 니 다.$emit("click".fn)
    • 개 조 된 코드 는 다음 과 같 습 니 다.
    
<template>
 <button class="disable-hover button ion-button" @click="_click"
     :class="[modeClass,typeClass,shapeClass,sizeClass,colorClass,roleClass,strongClass]">
  <span class="button-inner">
   <slot></slot>
  </span>
  <div class="button-effect"></div>
 </button>
</template>

<script type="text/babel">
export default{
  ....
  ....
  methods: {
   _click: function () {
    this.$emit('click', function () {
     alert('inner')
    })
   }
  }
}
</script>
    부모 구성 요소 에서 이렇게 사용:
    
<ion-button @click="primary()" color="primary">primary</ion-button>
    아마도 독자 들 이 알 수 있 듯 이 저 는 아이 오 닉 2.X 의 구성 요소 API 를 참조 하여 Vue 2.0 의 기능 구성 요 소 를 쓰 고 있 습 니 다.현 재 는 Action Sheet,Button,Icon,Alert,Toast 등 몇 가지 만 완 성 했 습 니 다.아이 오 닉 소스 코드 를 보면 서 생각 을 Vue 코드 로 정리 하 는 데 시간 이 걸 립 니 다.자신의 구성 요소 라 이브 러 리 를 쌓 아서 나중에 빨리 개발 할 수 있 기 를 바 랍 니 다.
    현재 프로젝트주소.는 여기 서 초기 에 기능 을 실현 하 는 것 을 위주 로 하고 생산 환경 에 사용 하 는 것 을 권장 하지 않 으 며 코드 를 읽 고 생각 을 실현 하면 됩 니 다.중국어 비고 가 모두 잘 되 었 습 니 다.
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
    Android TextWatcher 는 EditText 의 입력 내용 을 모니터링 하고 개 수 를 제한 합 니 다.
    qq 에서 반환 키 를 누 르 면 데스크 톱 에서 프로그램 을 종료 하지 않 는 인 스 턴 스 를 되 돌려 줍 니 다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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