Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use @ click.native, @ click.stop and @ click.self of vue". The explanation in this article is simple and clear and easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use @ click.native, @ click.stop and @ click.self of vue".

Reference 1:

Vue @ click.native native click event:

1. When binding events to vue components, you must add native, otherwise it will not take effect (listen for the native events of the root element, using the .native modifier)

2, which is equivalent to in the self-component:

The sub-component handles the click event internally and then sends the click event out: $emit ("click" .fn)

Reference 2:

You often need to call event.preventDefault () or event.stopPropagation () in the event handler. Although we can easily do this within the method, it would be better to let the method be purely data logic and not deal with the details of the DOM event.

To solve this problem, Vue.js provides two event modifiers for v-on: .stop and .stop. Do you remember that modifiers are instruction suffixes that begin with a period?

Reference 3:

...

...

When using modifiers, order is important; the corresponding code is generated in the same order. therefore,

Using v-on:click.prevent.self will block all clicks

V-on:click.self.prevent only blocks clicks on the element itself.

Unlike other modifiers that only work on native DOM events, the. once modifier can also be used on custom component events. If you haven't read the documentation about the components, don't worry about it now.

Vue also provides the .passive modifier for the passive option in addEventListener.

...

This .passive modifier in particular can improve the performance of the mobile side.

Do not use .passive with .passient, because .passient will be ignored and the browser may show you a warning. Remember,. Passive will tell the browser that you do not want to block the default behavior of the event.

Reference 4:

With regard to the jump of the route, if we use the a tag on the direct page, there is nothing wrong with it.

But since it's a vue single page, we should be able to use the components that come with vue, so try to be proficient with them.

Page interaction

Test has native router-link

/ / in the above case, the route will jump to the home page and the console will print out

Test no native router-link

/ / in the above case, the route only jumps to the home page and the console does not respond.

/ / ps:@mouseover, @ mouseout and so on

Export default {

Methods: {

ClickTag () {

Console.log ('i am click in father.vue')

}

}

}

The above is the case of the components that come with vue. If it is a custom component, the native modifier plays a code-saving role in my eyes.

Parent component

/ / js methods part

SvgClickTag () {

Console.log ('svg-icon click in father.vue')

}

Child components: to implement click events within the parent component, the child component must listen for clicks and trigger the click defined by the parent component

/ / js methods part

ClickSvgComponent () {

This.$emit ('click')

}

If you have the native modifier, there will be no subcomponents.

/ / the child component writes as usual, does not make any event binding, and deletes methods

/ / parent component

For el-button in vue-element-ui

Sign in

/ / personally, I think the library has dealt with the native click in some places, because the attempt to lose the native has been successful as usual.

Summary: native is a way to change a component back to native DOM, which is equivalent to binding native events to a component.

Thank you for your reading. the above is the content of "how to use @ click.native, @ click.stop and @ click.self of vue". After studying this article, I believe you have a deeper understanding of how to use @ click.native, @ click.stop and @ click.self of vue. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.