Vue event handling guide for Vue3

1. Basic event handling

usev-on command(Abbreviated@), we can monitorDOMEvent and run handler methods or inlineJavascript。

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

// OR

<div @click='handleClick' />

2. Specify custom events to the parent component

A common use case in any web framework is the expectation that child components can issue events to their parent components, which is also the principle of two-way data binding.

A common example is to transfer data frominputThe component is sent to the parent form.

According to what we useOptions APIstillComposition API, the syntax for emitting events is different.

exist Options API We can simply callthis.$emit(eventName, payload) ,Examples are as follows:

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

but,Composition APIUsed differently than this. Need to be inVue3 ProvidedsetupMethod Useemitmethod.

Just importcontextobject can be used withOptions APIThe same parameter calls emit.

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

    return { handleUpdate }
  } 
}

Of course, I often use it in projectsDeconstructed to use:

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

    return { handleUpdate }
  } 
}

Perfect!

Regardless of what we useOptions stillComposition API, the parent group listens in the same way.

<HelloWorld @update='inputUpdated'/>

First, we can use it in the template$ event access deliveryvalue.

If in componentemit The outgoing method has a passed value, and we can capture it in two different ways, depending on whether we use inline or use the method.

The first type:Used in templates$eventAccess the passed value.

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

The second type:Use methods to handle events, then the passed value will be automatically passed to our method as the first parameter.

<HelloWorld @update='inputUpdated'/>

// ...

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

3. Mouse Modifier

Here is a list of the main DOM mouse events that we can capture in the v-on directive:

<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 a mouse event modifier to limit which mouse button will trigger our event. There are three:left，right andmiddle。

<!-- This will only trigger the left mouse button -->
<div @='handleLeftClick'> Left </div>

4. Keyboard modifiers

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, and there are two ways to do this.

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

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

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

V. System modifier

For some items, we may want to trigger the event only if the user presses the modifier key. Modification keys are similar to Command or shift.

In Vue,There are four system modifiers。

1. shift
2. alt
3. ctrl
4. meta (existmacYesCMD,existWindowsYesWindows key)
   

This is forVueCreating features such as custom keyboard shortcuts in the application is very useful.

<!-- Custom shortcuts，Yang usedShift + 8 Create a list -->
<input
   type='text'
   placeholder='Type something'
   @.56='createList'
/>

existVueThere is another one in the documentationexactmodifier to ensure that the event is triggered only if the key we specified is pressed and no other keys are left.

<!-- Custom shortcuts，onlyShift + 8 Lists will be created only when these two are pressed-->
<input
   type='text'
   placeholder='Type something'
   @.='createList'
/>

6. Event modifier

For allDOMEvents, we can use some modifiers to change how they run. Whether it is to stop propagation or block default operations,VueThere are two built-in onesDOMEvent modifier.

<!-- Block default behavior -->
<form @>

<!-- Stop bubbles -->
<form @='submitForm'>

<!-- Block default behavior和冒泡 -->
<form @='submitForm'>

<!-- Prevent events from being triggered multiple times -->
<div @='handleClose'> 

The possible bugs that may exist after the code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time to debug the log. Here I would like to recommend a useful bug monitoring tool for you.Fundebug。

This is the article about Vue event handling guide for Vue3. For more related Vue event handling guide, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!