.native 修飾符就是用來註冊元素的原生事件而不是元件自定義事件的

比如：自定義 Button.vue 元件

<template>
  <button type="button" @click="clickHandler"><slot /></button>
</template>

export default {
  name: 'button',
  methods: {
    clickHandler () {
      this.$emit('vclick') //
 
 觸發 `vclick` 事件
    }
  }
}

引用 Button.vue 元件

<vButton @click="clickHandler" @vclick="vClickHandler">按鈕</vButton>

import vButton from '@/components/Button'
export default {
  components: { vButton },
  methods: {
    clickHandler () {
      alert('onclick') // 此處不會執行 因為元件中未定義 `click` 事件
 

    },
    vClickHandler () {
      alert('onvclick') // 觸發 `vclick` 自定義事件
    }
  }
}

如果將上面模版改成如下方式，那麼兩個事件都會執行。

<vButton @click.native="clickHandler" @vclick="vClickHandler">按鈕</vButton>

所以， .native 修飾符就是用來註冊元素的原生事件而不是元件自定義事件的。