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

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

The difference between @ click and @ click.native.prevent

@ click is the syntax sugar used on buttons.

When @ click.native binds events to vue components, you must add native, otherwise you will think that you are listening to events customized by Item components.

Prevent is used to block default events. It's the equivalent of... Event.preventDefault (), if the parent component wants to listen to its own click on the child component, it needs to add the native modifier.

Let's talk about default events here.

The default event is the default event, such as a tag, click on the a tag, and the page will jump automatically

The meaning and use of .native in @ click.native.native

@ click.native in vue

.native-listens for native events on the root element of a component

Function: bind native events to components

@ click is the event binding that we often use in vue development, while @ is actually the abbreviation of v-on, while v-on is the API interface encapsulated by vue's event architecture.

That is, additional identifiers need to be added when dealing with DOM native events

For example, if you use the router-link tag and add the @ click event, the bound event will be invalid, because the function of router-link is a simple route jump, which will prevent the click event. If you do not add .native, the event will not be triggered, so you need to add .native to trigger the event.

When you bind an event to a vue component, add native. If it is an ordinary html element, you don't need it.

Click to jump to import Button from'.. / components/Button'export default {components: {Button}, data () {return {}} methods: {goToNext () {alert ('hello--world')}, and the study on "what's the difference between @ click and @ click.native.prevent in vue" is over. I hope I can solve everyone's 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.