原生Dom事件与组件自定义事件

原生Dom绑定系统事件

<template>
    <div>
        <button @click = "handler"></button>
    </div>
</template>

<script>
    export default{
        name:"Event",
        method:{
           handler(){console.log("原生点击事件")}
    }
}
</script>

组件自定义事件绑定

<template>
    <div>
        <Event1 @click = "handler"></Event1>
//组件上绑定的事件会被当做自定义事件处理而不是当作原生事件使用
//@click.native,增加.native修饰符则可以将其当作原生事件处理,即给组件最外部根节点绑定事件.
    </div>
</template>

<script>
import Event1 from "..."
    export default{
        name:"Event",
        components:{
            Event1,
    }
        method:{
           handler(option){console.log("自定义点击事件")}//可以接收emit发送的参数
    }
}
</script>



//Event1
<template>
    <div>
        <button @click="$emit("click",option)"></button> //option为传递的参数,触发父组件的自                                                                                    
                                                         //定义事件
    </div>
</template>

原生Dom上没有绑定自定义事件的必要