Vue custom components use event modifiers to step on the pit record

Preface

Today, when I was using a self-written component, I suddenly encountered a long-lost bubbling event. I thought of using Vue's own event modifier (.stop). I thought I could solve the bubbling problem, but I encountered this problem.

insert image description here

A bunch of question marks in your mind? ? ? ? What the hell is this? I wrote it according to the Vue documentation (vomiting blood)

So, I started on the journey of solving the problem.

Programmer routine operations:

Open the browser and search on Baidu/Google. I found that there are a lot of things that come out, but none of them can solve my problem. I have no choice but to go to the Vue documentation! ! ! !
I have read the Vue documentation at least dozens of times, and I thought I didn't miss anything. I was sure that the Vue documentation didn't have the answer to this problem. I searched hard and came here

insert image description here

Um? This event.stopPropagation()? ? ?

Suddenly, an idea came to me! ! ! !

insert image description here

Since event.stopPropagation() can be triggered, I can pass the event over, and the problem can be solved. Just do it! !

Start amateur code modification

insert image description here

Use custom components as follows:

insert image description here

Let's look at the console output

insert image description here

That's it! ! ! ! ! But why is it output twice? ? ? ? I thought I could just solve it, but then a strange curiosity arose.

Start the journey to find the bug that triggered twice

I tried adding the .once modifier, but it didn't work. I clicked a few more times and found that it was triggered twice.

insert image description here

So weird! What the hell is this! ! ! !

Continuing to try to use the Vue event modifier .once, the following output appeared

insert image description here

It can indeed be triggered only once, but why does it print twice the first time? ! ! (faint)

The problem has not been completely solved, keep looking. . . .

Check the print timestamp (timeStamp), they are all triggered at the same time, this is not easy to do

Continue to search using your browser

Inspiration came to me, how about using setTimeout to force it to be triggered only once?

Start code transformation

insert image description here

Okay, let’s see the effect

insert image description here

success! ! ! ! All the difficulties along the way were solved! ! !

Summarize

This is the end of this article about Vue custom components using event modifiers. For more relevant content about Vue using event modifiers, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Event modifiers (style) and templates in Vue5
Detailed explanation of Vue event handling and event modifiers
Vue double-click event 2.0 event monitoring (click-double-click-mouse event) and event modifier operation
Detailed explanation of Vue event modifiers native and self examples
Vue framework keyboard events, key value modifiers, two-way data binding
Tutorial on using Vue.js event modifiers
Event modifiers in Vue: once, prevent, stop, capture, self, passive

<<: 8 ways to manually and automatically backup your MySQL database

>>: Complete steps for Docker to pull images