Vue3 Vue Event Handling Guide

1. Basic event handling

Using v-on指令( @ for short), we can listen to DOM events and run handler methods or inline Javascript .

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

//OR

<div @click='handleClick' />

2. Send custom events to parent components

A common use case in any web framework is to want child components to be able to emit events to their parent components, which is also the principle of two-way data binding.

A common example is sending data from input component to a parent form.

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

In Options API , we can simply call this.$emit(eventName, payload ), as shown below:

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

However, Composition API is used differently. You need to use the emit method in the setup method provided by Vue3 .

As long as you import context object, you can call emit with the same arguments as 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 $ event訪問傳遞in the template.

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

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

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

The second method is to use a method to handle the event, 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 Modifiers

Here is a list of the main DOM mouse events 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 mouse event modifiers to restrict which mouse button will trigger our event. There are three: left，right and middle .

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

4. Keyboard Modifiers

There are three DOM keyboard events we can listen to:

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

Typically, we want to detect these events on a certain key, and there are two ways to do this.

1. keycodes
2. Vue has aliases for some 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'
/>

5. System Modifiers

For some projects, we may only want to trigger an event if the user holds down a modifier key. Modifier keys are like Command or Shift.

In Vue, there are four system modifiers .

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

This is useful for creating features like custom keyboard shortcuts in your Vue applications.

<!-- Custom shortcut, Yang uses Shift + 8 to create a list -->
<input
   type='text'
   placeholder='Type something'
   @keyup.shift.56='createList'
/>

From the Vue documentation, there is also an exact modifier to ensure that the event is only triggered if the key we specify is pressed and no other keys are pressed.

<!-- Custom shortcuts, only Shift + 8 will create a list when pressed-->
<input
   type='text'
   placeholder='Type something'
   @keyup.shift.56.exact='createList'
/>

6. Event modifiers

As with all DOM events, we can use some modifiers to change the way they operate. Vue has two built-in DOM event modifiers for both stopping propagation and preventing the default action.

<!-- Prevent default behavior -->
<form @submit.prevent>

<!-- Stop bubbling -->
<form @submit.stop='submitForm'>

<!-- Prevent default behavior and bubbling -->
<form @submit.stop.prevent='submitForm'>

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

There is no way to know in real time what bugs may exist after the code is deployed. In order to solve these bugs afterwards, a lot of time was spent on log debugging. Here I would like to recommend a useful bug monitoring tool, Fundebug.

This is the end of this article about Vue Event Handling Guide of Vue3. For more relevant Vue Event Handling Guide content, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!