Vue의 기본 이벤트 처리에 대한 간략한 소개

이 글은 기본 이벤트 처리와 관련된 문제를 주로 소개하는 vue에 대한 관련 지식을 제공합니다. Vue 이벤트 처리는 모든 Vue 프로젝트에 필요한 측면입니다. 이는 사용자 입력을 캡처하고, 데이터를 공유하고, 기타 다양한 창의적인 방법을 사용하는 데 사용됩니다. 함께 살펴보시고, 모두에게 도움이 되었으면 좋겠습니다.

【관련 권장 사항: javascript 비디오 튜토리얼, vue.js 튜토리얼】

Vue 이벤트 처리는 모든 Vue 프로젝트에 필요한 측면입니다. 이는 사용자 입력을 캡처하고, 데이터를 공유하고, 기타 다양한 창의적인 방법을 사용하는 데 사용됩니다.

이 기사에서는 기본 사항을 다루고 이벤트 처리에 대한 몇 가지 코드 예제를 제공합니다.

기본 이벤트 처리

v-on 지시문(줄여서 @)을 사용하면 DOM 이벤트를 수신하고 핸들러 메서드를 실행하거나 Javascript를 인라인으로 실행할 수 있습니다.

<div v-on:click=&#39;handleClick&#39; />
<!-- 相当于 -->
<div @click=&#39;handleClick&#39; />

캡처할 수 있는 보다 일반적인 이벤트 중 일부를 다루겠습니다. , 단일 DOM 이벤트의 전체 목록을 보려면 여기를 클릭하십시오.

사용자 정의 이벤트 내보내기

모든 웹 프레임워크의 일반적인 사용 사례는 하위 구성 요소가 상위 구성 요소에 이벤트를 내보낼 수 있도록 하는 것입니다. 이렇게 하면 양방향 데이터 바인딩이 가능해집니다.

이에 대한 예는 입력 구성 요소에서 상위 양식으로 데이터를 보내는 것입니다.

이벤트를 내보내는 구문은 옵션 API를 사용하는지 아니면 Composition API를 사용하는지에 따라 다릅니다.

Options API에서는 간단히 이것을 호출할 수 있습니다.$emit(eventName, payload):

export default {
  methods: {
    handleUpdate() {
      this.$emit('update', 'Hello World')
    }
  }
}

그러나 Composition API에는 이것이 없습니다. 대신 Vue3 설정 메소드를 사용하여 Emit 메소드에 직접 액세스할 수 있습니다.

setup 메소드의 두 번째 매개변수는 attrs, Slot 및 Emit의 세 가지 속성을 포함하는 컨텍스트 변수입니다.

컨텍스트 개체를 가져오는 한 옵션 API와 동일한 매개변수를 사용하여 내보내기를 호출할 수 있습니다.

export default {
  setup (props, context) {
    const handleUpdate = () => {
      context.emit('update', 'Hello World')
    }
    return { handleUpdate }
  } 
}

코드를 정리하는 한 가지 방법은 객체 구조 분해를 사용하여 내보내기를 직접 가져오는 것입니다. 이렇게 생겼습니다.

export default {
  setup (props, { emit }) {
    const handleUpdate = () => {
      emit('update', 'Hello World')
    }
    return { handleUpdate }
  } 
}

Options API를 사용하든 Composition API를 사용하든 상위 구성 요소는 동일한 방식으로 사용자 정의 이벤트를 수신합니다.

<HelloWorld @update=&#39;inputUpdated&#39;/>

우리가 내보내는 메서드에 값도 전달되면 인라인으로 작업하는지 아니면 다른 메서드를 사용하는지에 따라 두 가지 방법으로 캡처할 수 있습니다.

먼저 템플릿에 전달된 $event 값을 사용할 수 있습니다.

<HelloWorld @update=&#39;inputUpdated($event)&#39;/>

둘째, 이벤트를 처리하는 메서드를 사용하면 전달된 값이 자동으로 첫 번째 매개변수로 메서드에 전달됩니다.

<HelloWorld @update=&#39;inputUpdated&#39;/>