【vue】$event的理解
一、在原生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>