The difference and description of @ and @click

The difference between @ and @click

@clickYes The template syntax provided by the framework is used to bind click events to DOM elements, equivalent tov-on:click. It can only listen to click events for elements inside Vue components and prevent default behavior and events from bubbling.

and@It is one of the modifiers provided by the framework to listen for native click events of DOM elements and will not handle any default behavior and event bubbles. Compared with@click, it can listen for click events of any DOM element, including nested subcomponents and sub-elements within the component.

For example:

If you want to listen for a click event from an element within a slot, you can use@to bind the event.

Why is the click event using @click does not take effect, and it only takes effect when using @?

Introducedbetter-scrollUsed in components@clickThe event will be invalid and needs to bebetter-scrollSet in the configuration itemclick: trueOnly by making@clickThe event takes effect. This is becausebetter-scrollWill block the default browser event and convert it into a custom scroll event, resulting in a nativeclickThe event cannot be responded.

and@Can listen to the native DOM elementsclickEvents will not passbetter-scrollTherefore, it can respond to the user's click operation normally.

To sum up, if usedbetter-scrollor other possible impact on nativeclickWhen using the component of the event response, it is recommended to use it@Come to bindclickevents, thereby avoiding the problem of event failure.

Analysis of @click and @, and its vue event mechanism

vue maintains its own event mechanism。

So there is a difference between native DOM events and custom events, such as the original official website below.

When used on ordinary elements, you can only listen for native DOM events. When used on a custom element component, you can also listen for custom events triggered by subcomponents.

This article will also revolve around this sentence.

I believe everyone will customize events in custom components.

<my-component v-on:my-event="doSomething"></my-component>

So how to add native events to custom group prices? In fact, it is theoretically not feasible to think about it, because custom components will not be rendered to the page in the end, so how to add them?

So the way Vue binds native events to custom components is: bind native events to the root node of the component, and there is only one root node...

But you have to tell vue that you should currently bind the DOM event to the native node, not the custom event.

as follows:

<!-- No matter how you clickhelloNone of the parent component's events will be triggered -->
<!-- Unless you add@click="$emit('click')"，That is, triggering a custom event -->
<template>
  <div class="hello">
    hello
  </div>
</template>

<template>
  <div >
    <HelloWorld msg="Welcome to Your  App" @click="clickEvent"/>
  </div>
</template>
<script>
  methods: {
    clickEvent(){
      ('Event trigger')
    }
  }
</script>

Or just simpleUse .native。

<HelloWorld msg="Welcome to Your  App" @="clickEvent"/>

OK, you already understand the purpose of .native. Next, let’s talk about the native node binding custom DOM events.

Look at the code directly as follows:

<template>
  <div  @customizedEvent="myEvent">
    <HelloWorld msg="Welcome to Your  App"/>
  </div>
</template>

<script>
import HelloWorld from './components/'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  mounted() {
    const app = ('app');

    const event = ('HTMLEvents');
    ('customizedEvent', false, true);
    (event);
  },
  methods: {
    myEvent() {
      ('customizedEvent')
    }
  }
}
</script>

We can trigger events bound to native elements through the native event dispatch mechanism.

It means that what vue does for you is actually

('customizedEvent', myEvent, false);

That is to say, it is not a custom event in the component, but a native DOM event.

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.