Vue는 이벤트를 어떻게 처리하나요? 관련 기초지식 소개

이 글에서는 Vue 이벤트 처리에 대한 기본 지식을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

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

이 글에서는 이벤트 처리에 대한 기본 지식을 소개하고 몇 가지 코드 예제를 제공합니다. 여기에는 제가 가장 유용하다고 생각하는 팁/방법만 포함되어 있습니다. Vue가 할 수 있는 모든 것에 대해 자세히 알아보려면 Vue 문서를 확인하세요.

기본 이벤트 처리

v-on 지시어(@라고 함)를 사용하여 DOM 이벤트를 수신하고 핸들러 메서드 또는 인라인 Javascript를 실행할 수 있습니다. v-on指令(简称@)，我们可以监听DOM事件并运行处理程序方法或内联Javascript。

// v-on 指令
<div v-on:click=&#39;handleClick&#39; />

// OR

<div @click=&#39;handleClick&#39; />

向父组件发出自定义事件

任何Web框架中的常见用例都是希望子组件能够向其父组件发出事件，这也是双向数据绑定原理。

常见一个示例是将数据从 input组件发送到父表单。

根据我们使用的是Options API还是Composition API，发出事件的语法是不同的。

在 Options API 中，我们可以简单地调用this.$emit(eventName, payload) ,示例如下：

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

但是，Composition API 使用方式与此不同。 需要在 Vue3 提供的 setup方法使用emit方法。

只要导入context对象，就可以使用与Options API相同的参数调用emit。

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 还是 Composition API，父组监听的方式都是一样的。

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

首先，我们可以在模板中使用$ event访问传递的值。

如果在组件 emit 出去方法有传递值，我们可以通过两种不同的方式捕获它，这取决于我们是使用内联还是使用方法。

第一种是在模板中使用$event访问传递的值。

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

第二，使用方法来处理事件，则传递的值将作为第一个参数自动传递给我们的方法。

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

// ...

methods: {
    inputUpdated: (value) => {
      console.log(value) // WORKS TOO
    }
}

鼠标修饰符

下面是我们可以在v-on指令中捕获的主要DOM鼠标事件列表：

<div 
  @mousedown=&#39;handleEvent&#39;
  @mouseup=&#39;handleEvent&#39;
  @click=&#39;handleEvent&#39;
  @dblclick=&#39;handleEvent&#39;
  @mousemove=&#39;handleEvent&#39;
  @mouseover=&#39;handleEvent&#39;
  @mousewheel=&#39;handleEvent&#39;
  @mouseout=&#39;handleEvent&#39;
>
Interact with Me!
</div>

对于单击事件，我们还可以添加鼠标事件修饰符来限制哪个鼠标按钮将触发我们的事件。有三个: left，right 和 middle。

<!-- 这只会触发鼠标左键 -->
<div @mousedown.left=&#39;handleLeftClick&#39;> Left </div>

键盘修饰符

我们可以听三个DOM键盘事件：

<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keypress=&#39;handleKeyPressed&#39;
   @keydown=&#39;handleKeyDown&#39;
   @keyup=&#39;handleKeyUp&#39;
/>

通常，我们想检测某个键上的这些事件，有两种方法可以执行此操作。

• keycodes

• Vue具有某些键的别名（enter, tab, delete, esc, space, up, down, left, right)

<!-- Trigger even when enter is released -->
<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keyup.enter=&#39;handleEnter&#39;
/>

<!-- OR -->
<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keyup.13=&#39;handleEnter&#39;
/>

系统修饰符

对于某些项目，我们可能只想在用户按下修饰键的情况下触发事件。 修饰键类似于Command或shift。

在Vue中，有四个系统修饰符。

• shift

• alt

• ctrl

• meta (在mac上是CMD，在Windows上是Windows键)

这对于在Vue应用程序中创建诸如自定义键盘快捷键之类的功能非常有用。

<!-- 自定义快捷方式，杨使用Shift + 8 创建列表 -->
<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keyup.shift.56=&#39;createList&#39;
/>

在Vue文档中，还有一个exact

<!-- 自定义快捷方式，只有Shift + 8 这两个按下时才会创建列表-->
<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keyup.shift.56.exact=&#39;createList&#39;
/>

상위 구성 요소에 사용자 정의 이벤트 내보내기

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

일반적인 예는 input 구성 요소에서 상위 양식으로 데이터를 보내는 것입니다.

이벤트를 내보내는 구문은

Options API

를 사용하는지

Composition API

를 사용하는지에 따라 다릅니다.

Options API에서는 간단히 this.$emit(eventName, payload)를 호출하면 되는데, 예시는 다음과 같습니다.

<!-- 阻止默认行为 -->
<form @submit.prevent>

<!-- 阻止冒泡 -->
<form @submit.stop=&#39;submitForm&#39;>

<!-- 阻止默认行为和冒泡 -->
<form @submit.stop.prevent=&#39;submitForm&#39;>

<!-- 防止事件被多次触发 -->
<p @close.once=&#39;handleClose&#39;>

그러나 Composition API는 다르게 사용됩니다. Vue3에서 제공하는 setup 메소드 중 emit 메소드를 사용해야 합니다.

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

물론 저는 프로젝트에서 해체를 많이 사용합니다. 🎜rrreee🎜완벽해요! 🎜🎜Options API를 사용하든 Composition API를 사용하든 상위 그룹이 듣는 방식은 동일합니다. 🎜rrreee🎜먼저 템플릿의 $event를 사용하여 전달된 값에 액세스할 수 있습니다. 🎜🎜구성 요소의 방출 메소드에 전달된 값이 있는 경우 인라인을 사용하는지 메소드를 사용하는지에 따라 두 가지 방법으로 캡처할 수 있습니다. 🎜🎜첫 번째는 템플릿의 $event를 사용하여 전달된 값에 액세스하는 것입니다. 🎜rrreee🎜둘째, 이벤트를 처리하는 메서드를 사용하면 전달된 값이 자동으로 첫 번째 매개변수로 메서드에 전달됩니다. 🎜rrreee🎜Mouse Modifiers🎜🎜다음은 v-on 지시문에서 캡처할 수 있는 주요 DOM 마우스 이벤트 목록입니다. 🎜rrreee🎜클릭 이벤트의 경우 마우스 이벤트 수정자를 Limit에 추가할 수도 있습니다. 어떤 마우스 버튼이 이벤트를 트리거할 것인지. 왼쪽, 오른쪽, 가운데의 세 가지가 있습니다. 🎜rrreee🎜Keyboard Modifiers🎜🎜우리가 들을 수 있는 세 가지 DOM 키보드 이벤트가 있습니다: 🎜rrreee🎜일반적으로 우리는 특정 키에서 이러한 이벤트를 감지하려고 합니다. 이를 수행하는 방법에는 두 가지가 있습니다. 🎜

• 🎜keycodes🎜
• 🎜Vue에는 특정 키에 대한 별칭이 있습니다(enter, 탭 , 삭제, esc, space, 위로, 아래로 , 왼쪽, 오른쪽)🎜

rrreee🎜시스템 수정자🎜🎜일부 프로젝트의 경우 사용자가 키를 누를 때만 키를 수정하고 싶을 수도 있습니다. 이벤트가 발동됩니다. 수정자 키는 Command 또는 shift와 유사합니다. 🎜🎜Vue에는 네 가지 시스템 수정자가 있습니다. 🎜

• 🎜shift🎜
• 🎜alt🎜
• 🎜ctrl🎜
• 🎜 메타(Mac에서는 CMD, Windows에서는 Windows 키) 🎜

🎜Vue 애플리케이션에서 사용자 정의 키보드 단축키와 같은 것을 만드는 데 유용합니다. 🎜rrreee🎜Vue 문서에는 우리가 지정한 키를 누르고 다른 키를 누르지 않을 때만 이벤트가 발생하도록 보장하는 exact 수정자가 있습니다. 🎜rrreee🎜🎜이벤트 수정자🎜🎜🎜모든 DOM 이벤트에 대해 일부 수정자를 사용하여 실행 방식을 변경할 수 있습니다. 전파를 중지할지 기본 작업을 방지할지 여부에 관계없이 Vue에는 두 개의 내장 DOM 이벤트 수정자가 있습니다. 🎜rrreee🎜🎜영어 원본 주소: https://segmentfault.com/a/1190000039938779🎜🎜저자: Fernando Doglio🎜🎜번역자: Front-end Xiaozhi🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요: 🎜Programming Video🎜 ! ! 🎜

위 내용은 Vue는 이벤트를 어떻게 처리하나요? 관련 기초지식 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!