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.

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

Um? This event.stopPropagation()? ? ?

Suddenly, an idea came to me! ! ! !

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

Use custom components as follows:

Let's look at the console output

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.

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

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

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

Okay, let’s see the effect

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!