一、在原生dom事件里就是事件对象
注意两点
1.不使用圆括号，event被自动当作实参传入
2.使用圆括号，必须显式的传入event对象，如果不传入可能最终找到的是全局的window .event
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
// ...
methods: {
warn: function (message, event) {
// 用来阻止默认事件
if (event) event.preventDefault()
alert(message)
}
}
二、自定义事件组件，就是$ emit 的第一个参数
vue中事件绑定v-on，简写可以写作@
例子一：
（1）vue组件发出自定义事件，这个是带参的，不带参数的去掉后边的book
<div class="book-items">
<div class="book" v-for="book in books" @click="$emit('select',book)">
<div class="cover"> <img :src="book.img_url"/> </div>
<div class="title">{{book.title}}</div>
<div class="authors">{{book.authors | join }}</div>
</div>
</div>（2）组件自定义事件在“页面”的响应，对应一个页面中的方法，这里包含传参，如果不传，一个字符串就可以了
<div class="section">
<!-- 新书上架 -->
<BookList :books="page_data.promotions"
heading="最新更新"
@select="preview($event) “>
</BookList>
</div>
对应的方法：
<script>
export default{
。。。
methods: {
preview (book) {
this.selected = book
}
}
}
</script>
例子二：在input组件中起到的作用也差不多，相当于传入的第一个参数
组件内：
<template>
<div class="grid-content bg-purple-light">
<el-input
:placeholder="pl"
prefix-icon="el-icon-search"
@keyup.enter.native="$emit('search',$event.target.value)"
:value="terms"
>
</el-input>
</div>
</template>
<script>
export default{
props:["terms","pl"]
}
</script>
⚠️：因为使用了element所以这里要加一个native
外部绑定
<MySearch :terms=“terms" pl="请输入您要筛选的书名" @search="terms=$event">
</MySearch>
export default {
name: 'App',
data(){
return{
terms:"",
}
},
components:{
MySearch,
},
}
⚠️：v-on也可以在触发的时候运行一些代码，向上边的赋值，以及像这样的小逻辑<button v-on:click="counter += 1">Add 1</button>