SoFunction
Updated on 2025-04-05

Detailed explanation of the Vue event modifier native and self example

There is a reason for this

I think I should be able to answer the native and self-related questions asked in the interview before, and I may be confused by the previous hour of the question. Embarrassing ~~
I have studied it myself, and I hope to supplement the shortcomings and make progress with each other.

native

What's the use of modifier native

  1. native is a native event (first reaction, it didn't happen at that time...)

Make up for it

  1. native must be used for custom components, that is, custom html tags

Let's make it clear in combination with the code

<body>
 <div >
  <div class="box" >
   <Son @click='handler1'></Son>
  </div>
 </div>

</body>
<script>
 const Son = ('Son', {
  template: '<button @mouseover=handler2 class="box1">son</button>',
  methods: {
   handler2 (e) {
    
   }
  }
 })
 new Vue({
  el: "#app",
  components: {
   Son
  },
  data() {
   return {
    a: 123
   }
  },
  methods: {
   handler1 (e) {
    ('Parent')
   }
  }
 })

</script>

Note

  1. When <Son @click='handler1'></Son>, this.$listeners in the child component returns {click: ƒ}, and there is no bound click event on the dom of box1 (you can open F12 to view), so this event is not a native click
  2. When <Son @='handler1'></Son>, this.$listeners in the child component returns {}, and a click event is bound to the dom of box1 (you can open F12 to view), so this event is a native click
  3. When <Son @='handler1'></Son>, this.$listeners in the child component returns {click: ƒ}, and there is no bound click event on the dom of box1 (you can open F12 to view), so this event is not a native click
  4. This.$emit('eventTpye') of the child component is found from the return value of this.$listeners

Why sometimes component click event does not take effect

guess

  • The subcomponent html tag does not define click native events
  • This.$emit('click') is not executed by the child component

so

Directly .native binds events to child component html tags, similar to ('click', handler)

self

effect

Quote official instructions

&lt;!-- Just as  The processing function is triggered when the current element itself --&gt;
&lt;!-- That is, events are not triggered from internal elements --&gt;
&lt;div v-on:="doThat"&gt;...&lt;/div&gt;

Combined with code description

<body>
 <div >
  <div class="box" @='handler1'>
   <Son ></Son>
  </div>
 </div>

</body>
<script>
 const Son = ('Son', {
  template: '<button @click=handler2 class="box1">son</button>',
  methods: {
   handler2 (e) {
    (, )
   }
  }
 })
 new Vue({
  el: "#app",
  components: {
   Son
  },
  data() {
   return {
    a: 123
   }
  },
  methods: {
   handler1 (e) {
    (, )
   }
  }
 })
</script>

It is to use the sum. When adding self, the callback will be triggered only when the two are equal.

Summarize

The above is the entire content of this article. I hope that the content of this article has certain reference value for your study or work. Thank you for your support.