vue工作开发总结（四）----事件参数$event

$event 是事件对象的特殊变量，在一些场景可以帮我们实现提供更多可用参数

 

###原生事件

在原生事件中表现和默认事件对象相同

<template>
    <div>
        <input type="text" @input-"inputhandler('hello',$event)" />
    </div>
</template>
export default {
    methods:{
        inputhandler(msg,e){
            console.log(e.target.value)
        }
    }
}

 

 

自定义事件

在自定义事件中表现为捕获从子组件抛出的值

my-vue.vue:

export default {
    methods:{
        customEvent(){
            this.emit('custom-event',{name:"wangwei"})
        }
    }
}

app.vue:
<template>
    <div>
        <my-vue v-for="(item,index) in list" @custom-event="customEvent(index,$event)" />
    </div>
</template>
export default {
    methods:{
        customEvent(index,e){
            console.log(e)//{name:wangwei}
        }
    }
}

文档：https://cn.vuejs.org/v2/guide/events.html#内联处理器中的方法

https://cn.vuejs.org/v2/guide/components.html#使用事件抛出一个值