Of Stack

Vue Event Handling Guide for Vue3

  • 2021-11-14 05:02:59
  • OfStack
Directory 1. Basic event handling 2. Issue custom events to parent components 3. Mouse modifiers 4. Keyboard modifiers 5. System modifiers 6. Event modifiers

1. Basic event handling

Use v-on指令 (Abbreviation) @ ), we can listen DOM Event and run the handler method or inline Javascript . 


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

// OR

<div @click='handleClick' />

2. Issue custom events to the parent component

A common use case in any Web framework is to expect a child component to issue an event to its parent, which is also the bidirectional data binding principle.

A common example is to transfer data from input Component to the parent form.

According to what we use Options API Or Composition API The syntax for emitting events is different.

In Options API We can simply call the this.$emit(eventName, payload ), for example: 


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

But, Composition API Use it differently. Need to be in @0 Offered setup Method uses emit Method.

Just import context Object, you can use the Options API The same parameter calls emit. 


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

    return { handleUpdate }
  } 
}

Of course, I often use deconstruction in projects to use: 


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

    return { handleUpdate }
  } 
}

Perfect!

Whether we use Options Or Composition API The parent group listens in the same way. 


<HelloWorld @update='inputUpdated'/>

First, we can use the $ event访问传递 The value of.

If you are in a component emit The outgoing method has a passing value, and we can capture it in two different ways, depending on whether we use inline or method.

Type 1: Is used in templates $event Access the passed value. 


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

Type 2: Use a method to handle an event, the value passed will be automatically passed to our method as the first parameter. 


<HelloWorld @update='inputUpdated'/>

// ...

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

3. Mouse modifiers

The following is a list of the main DOM mouse events that we can capture in the v-on directives: 


<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 . 


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

4. Keyboard modifiers

We can listen to 3 DOM keyboard events: 


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

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

keycodes Vue has some key aliases ( enter , tab , delete , esc , space , up , down , Javascript0 , Javascript1 ) 

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

5. System modifiers

For some projects, we may only want to trigger events when the user presses the modifier key. Modifier keys are similar to Command or shift.

In Vue, there are four system modifiers.

Javascript2 alt ctrl meta (In mac Above is CMD , in Windows Above is Windows键 )

This is important for the Vue It is very useful to create functions such as custom keyboard shortcuts in applications. 


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

In Vue In the document, there is also 1 exact To ensure that the event is fired only if the key we specify is pressed and there are no other keys. 


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

6. Event modifiers

For all DOM Event, we can use 1 modifiers to change how it runs. Whether you stop propagation or block the default operation, Vue Both have two built-in DOM Event modifier. 


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

<!--  Prevent 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'>

BUG that may exist after code deployment can't be known in real time. In order to solve these BUG afterwards, it took a lot of time to debug log. By the way, I recommend a good BUG monitoring tool Fundebug.

Related articles: