Vue.js의 v-on 이벤트 사용에 대한 자세한 설명

이번에는 Vue.js에서 v-on 이벤트를 사용하는 방법에 대해 자세히 설명하겠습니다. Vue.js에서 v-on 이벤트를 사용할 때 주의사항은 무엇인가요?

모든 Vue 인스턴스는 이벤트 인터페이스를 구현합니다. 즉:

$on(eventName)을 사용하여 이벤트를 수신하세요

$emit(eventName)을 사용하여 이벤트를 트리거하세요

Vue의 이벤트 시스템은 브라우저의 EventTarget API와 분리되어 있습니다. 유사하게 작동하지만 $on 및 $emit는 addEventListener 및 dispatchEvent의 별칭이 아닙니다.

또한 상위 구성 요소는 하위 구성 요소가 하위 구성 요소에 의해 트리거되는 이벤트를 수신하는 데 사용되는 v-on을 직접 사용할 수 있습니다.

다음은 문서의 예입니다.

2017년 4월 11일Updated

<p id="counter-event-example">
 <p>{{ total }}</p>
 <button-counter v-on:increment="incrementTotal"></button-counter>
 <button-counter v-on:increment="incrementTotal"></button-counter>
</p>
Vue.component('button-counter', {
 template: '<button v-on:click="increment">{{ counter }}</button>',
 data: function () {
  return {
   counter: 0
  }
 },
 methods: {
  increment: function () {
   this.counter += 1
   this.$emit('increment')
  }
 },
})
new Vue({
 el: '#counter-event-example',
 data: {
  total: 0
 },
 methods: {
  incrementTotal: function () {
   this.total += 1
  }
 }
})

1단계:

실제로 렌더링 후에는 4단계의 사용자 정의 라벨이 다음과 같이 표시됩니다. 동일한 코드이므로 여기서부터 상위 구성 요소와 하위 구성 요소 간의 이벤트 바인딩을 이해해야 합니다. 하위 구성 요소에서 클릭 이벤트(클릭)는 함수 increment(즉, 그림의 2단계)에 바인딩되어 있습니다. 즉, 하위 구성 요소의 버튼을 클릭하면 이해하기 쉽습니다. 구성 요소는 하위 구성 요소에 있는 증분을 트리거합니다.

2단계 및 3단계:

증가 함수가 트리거되어 실행되고, 2단계

this.$emit('increment')

에서 함수를 호출하는 명령문이 실행됩니다. 문서를 살펴보겠습니다

vm.$emit( ​​​​event, […args] ): 현재 인스턴스에서 이벤트를 트리거합니다. 추가 매개변수가 리스너 콜백에 전달됩니다

여기서는 무엇을 의미하나요? 내 언어로는 이렇게 말합니다.

이 함수를 통해 부모 컴포넌트는 자식 컴포넌트가 어떤 함수를 호출했는지 알 수 있는데, this.$emit('increment')는 자식 컴포넌트가 "안녕하세요, 아빠, 제가 직접 증분 함수를 불렀어요"라고 부모 컴포넌트에 알리는 것과 유사합니다. 상위 구성요소

4단계:

상위 구성 요소에 정의된 사용자 정의 태그를 다시 보면

v-on:increment="incrementTotal"

를 볼 수 있습니다. 그것은 무엇을 의미합니까? 쉬운 영어로 설명해보자

즉, "얘야, 네가 증분 함수를 부르면 내가 incrementTotal 함수를 불러서 응답해 줄게"라는 뜻이다

이때 3단계를 떠올립니다. 하위 구성요소에서는 알림을 사용하여 부모 구성요소와 하위 구성요소 간의 상호 응답 및 정보 전달을 형성합니다. 부모 컴포넌트와 자식 컴포넌트에서도 이 방법을 사용하는데, 일반적으로 컴포넌트가 자식 컴포넌트에 정보를 전달할 때 props 매개변수를 사용합니다. 특정 매개변수를 변경하는 상위 구성요소

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS 익명 함수 사용 방법

라이브 비디오 스트리밍을 위한 ffmpeg 기반 nodejs

Vue2.0 전역 스타일 설정을 위한 세부 단계

위 내용은 Vue.js의 v-on 이벤트 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!