Vue中的 native 修饰符Vue 提供使用v-on:eventName绑定事件，常简写为@eventName。在使

Vue 提供使用v-on:eventName绑定事件，常简写为@eventName。在使用过程中，很少会考虑到被事件作用的标签类型，因为一般该语法用在html原生标签中。在组件标签上使用时，会出现@click="handle"无法触发handle事件的情况。

<MyComponent @click="handle"></MyComponent>

@eventName使用在组件上表示绑定了组件自定义eventName，要绑定原生DOM事件，需要使用.native来修饰eventName（@eventName.native）。

自定义事件：Vue 自定义组件时，用于内部DOM元素响应时，开放给外部组件的 API。

自定义事件需要$emit('definedEventName',value)配合触发，eg:

<template>
    <MyComponent @click="handle"></MyComponent>
<template>
<script>
    // ...
    methods:{
        handle(value){
            console.log(value, '我是组件自定义点击事件')
        }
    }
</script>
    
// MyComponent组件内部
<template>
    <button @click="cause">按钮</button>
<template>
<script>
    // ...
    methods:{
        cause(){
            this.$emit('handle', value)
        }
    }
</script>

上述代码表示在点击按钮之后，通过$emit('组件身上定义的事件名', value)触发组件自定义的click事件以调用handle方法。

组件标签中想要触发@click事件，组件内部需要利用原生标签触发click事件，并且在这个原生click事件中使用emit调用组件上的@click方法。