[Vue3 update] Vue event handling guide

Author: Fernando Doglio
Translator: Frontend Xiaozhi
Source: medium

There are dreams and dry goods. WeChat search [Moving to the World] Follow this brushing wisdom who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

Vue event handling is a necessary aspect of every Vue project. It is used to capture user input, share data, and many other creative ways.

In this article, we will introduce the basics and provide some code examples for handling events. It only contains the tricks/methods that I think are the most useful. To learn more about all the things Vue can do, please check out Vue document .

Basic event handling

Using the v-on (abbreviated as @ ), we can listen to DOM events and run handler methods or inline Javascript.

// v-on 指令
<div v-on:click='handleClick' />

// OR

<div @click='handleClick' />

Emit a custom event to the parent component

A common use case in any web framework is to hope that a child component can send events to its parent component, which is also the principle of two-way data binding.

A common example is to send data from the input component to the parent form.

Depending on whether we are using Options API or Composition API , the syntax for sending events is different.

In the Options API, we can simply call this.$emit(eventName, payload) , an example is as follows:

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

However, the composition API is used in a different way. You need to use the emit method setup

As long as you import the context object, you can call emit with the same parameters as the Options API.

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

    return { handleUpdate }
  } 
}

Of course, I often use deconstruction in my projects:

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

    return { handleUpdate }
  } 
}

Perfect!

Whether we use Options or Composition API, the way the parent group listens is the same.

<HelloWorld @update='inputUpdated'/>

First, we can use $event in the template to access the passed value.

If there is a passing value in the emit method of the component, we can capture it in two different ways, depending on whether we use inline or method.

The first is to use $event in the template to access the passed value.

<HelloWorld @update='inputUpdated($event)'/>

Second, use methods to handle events, and the passed value will be automatically passed to our method as the first parameter.

<HelloWorld @update='inputUpdated'/>

// ...

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

Mouse modifier

Below is a list of the main DOM mouse events v-on

<div 
  @mousedown='handleEvent'
  @mouseup='handleEvent'
  @click='handleEvent'
  @dblclick='handleEvent'
  @mousemove='handleEvent'
  @mouseover='handleEvent'
  @mousewheel='handleEvent'
  @mouseout='handleEvent'
>
Interact with Me!
</div>

For click events, we can also add mouse event modifiers to limit which mouse button will trigger our event. There are three: left , right and middle .

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

Keyboard modifier

We can listen to three DOM keyboard events:

<input
   type='text'
   placeholder='Type something'
   @keypress='handleKeyPressed'
   @keydown='handleKeyDown'
   @keyup='handleKeyUp'
/>

Usually, we want to detect these events on a certain key. There are two ways to do this.

1. keycodes
2. Vue has aliases for certain keys ( enter , tab , delete , esc , space , up , down , left , right )

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

<!-- OR -->
<input
   type='text'
   placeholder='Type something'
   @keyup.13='handleEnter'
/>

System modifier

For some projects, we may only want to trigger an event when the user presses a modifier key. Command keys are similar to 061356112688ac or shift .

In Vue, there are four system modifiers.

1. shift
2. alt
3. ctrl
4. meta (CMD on mac, Windows key on Windows)

This is very useful for creating functions such as custom keyboard shortcuts in Vue applications.

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

In the Vue document, there is also a exact to ensure that the event is triggered only when the key we specify is pressed and there are no other keys.

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

Event modifier

For all DOM events, we can use some modifiers to change the way they operate. Whether it is to stop propagation or prevent default actions, Vue has two built-in DOM event modifiers.

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

<!-- 阻止冒泡 -->
<form @submit.stop='submitForm'>

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

<!-- 防止事件被多次触发 -->
<div @close.once='handleClose'> 

~ End, I’m the wise man, I’m going to do the dishes, my bones are too white~

---

possible BUGs that may exist after the 161356112689c7 code is deployed cannot be known in real time. In order to solve these BUGs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

Original: https://learue.co/2020/01/a-vue-event-hanling-cheatsheet-the-essentials/

comminicate

If you have dreams and dry goods, search on [Daily Move to the World] still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.