Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use the vue function @ click.prevent". In the daily operation, I believe many people have doubts about how to use the vue function @ click.prevent. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use the vue function @ click.prevent". Next, please follow the editor to study!

The use of @ click.prevent

Background: the @ click.prevent function is encountered in the operation of the vue project. The scenario is special (there is a self-encapsulated component library in the project, so all styles are integrated uniformly. When you want to introduce special UI style processing in special circumstances, some components need to be re-adjusted, so @ click.prevent is used.)

What is the purpose of @ click.prevent?

Note: @ click.prevent belongs to the built-in function of vue, and many other functions in vue also have rich application scenarios. This blog post has been pondered over and over again, only on @ click.prevent. For other functions, you can consult relevant materials on your own.

Solution: the @ click.prevent function blocks the original event that triggered the dom and executes the specific event instead.

To better understand the @ click.prevent function, introduce a usage sample from the project for reference:

/ / Codding... Modify

Vue also has several commonly used functions, such as @ keyup.enter (enter enter event), and so on.

@ click.stop and @ click.prevent@click.stop

Problem: a click event is added to the parent element, and the click event is also added to the child element below. At this point, I want to click on the child element to get the click event of the child element, but it triggers the event of the parent element:

Like to comment and share

At this point, we need to use the @ click.stop: stop event bubbling method to solve this problem:

Like to comment and share @ click.prevent

There is a similar method: @ click.prevent: block the default behavior of the event, for example: write an a tag in the code, and the click will jump to the target link page:

Baidu

But if we don't want it to jump but still want to use the a tag, we need to use the @ click.prevent method at this point:

Baidu

At this point, clicking on the a tab will not jump to the destination link.

At this point, the study on "how to use the vue function @ click.prevent" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.