2020-11-25

【vue】$event的理解

一、在原生dom事件里就是事件对象

注意两点

1.不使用圆括号，event被自动当作实参传入

2.使用圆括号，必须显式的传入event对象，如果不传入可能最终找到的是全局的window .event

1. <button v-on:click="warn('Form cannot be submitted yet.', $event)">

2.  

3.   Submit

4.  

5. </button>

6.  
7.  
8.  

9. // ...

10.  

11. methods: {

12.  

13.   warn: function (message, event) {

14.  

15.     // 用来阻止默认事件

16.  

17.     if (event) event.preventDefault()

18.  

19.     alert(message)

20.  

21.   }

22.  

23. }

24.  

 

二、自定义事件组件，就是$ emit 的第一个参数

 

 

vue中事件绑定v-on，简写可以写作@

 

 

例子一：

 

（1）vue组件发出自定义事件，这个是带参的，不带参数的去掉后边的book

1.        <div class="book-items">

2.  

3.             <div class="book" v-for="book in books" @click="$emit('select',book)">

4.  

5.                 <div class="cover"> <img :src="book.img_url"/> </div>

6.  

7.                 <div class="title">{{book.title}}</div>

8.  

9.                 <div class="authors">{{book.authors | join }}</div>

10.  

11.             </div>

12.  

13.         </div>

（2）组件自定义事件在“页面”的响应，对应一个页面中的方法，这里包含传参，如果不传，一个字符串就可以了

1.         <div class="section">

2.  

3.             <!-- 新书上架 -->

4.  

5.             <BookList :books="page_data.promotions"

6.  

7.                       heading="最新更新"

8.  

9.                       @select="preview($event) “>

10.  

11.             </BookList>

12.  

13.         </div>

 

对应的方法：

1. <script>

2.  

3.     export default{

4.  

5.         。。。

6.  

7.         methods: {

8.  

9.             preview (book) {

10.  

11.                 this.selected = book

12.  

13.             }

14.  

15.         }

16.  

17.     }

18.  

19. </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>