【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组件中起到的作用也差不多，相当于传入的第一个参数

组件内：

<el-input

:placeholder="pl"

prefix-icon="el-icon-search"

@keyup.enter.native="$emit('search',$event.target.value)"

:value="terms"

</el-input>

</div>

</template>

export default{

props:["terms","pl"]

}

</script>

⚠️：因为使用了element所以这里要加一个native

外部绑定

</MySearch>

export default {

name: 'App',

data(){

return{

terms:"",

}

components:{

MySearch,

}

⚠️：v-on也可以在触发的时候运行一些代码，向上边的赋值，以及像这样的小逻辑<button v-on:click="counter += 1">Add 1</button>

【vue】$event的理解相关推荐

php event loop,理解javascript中的事件循环(Event Loop)
背景在研究js的异步的实现方式的时候,发现了JavaScript 中的 macrotask 和 microtask 的概念.在查阅了一番资料之后,对其中的执行机制有所了解,下面整理出来,希望可以帮助 ...
简单理解浏览器的event loop 和 JavaScript的同步异步
为什么JavaScript是单线程的? JavaScript的主要用途是和用户进行交互以及对DOM的操作,为了避免复杂的同步问题(如果多线程,A线程对某DOM添加内容,B线程对它又进行了删除操作,这往 ...
对于怎么理解js中Event Loop，你可以看这篇文章
javascript中event loop是什么声明源文档地址介绍如何你跟我一样的话,那么你一定会爱上javascript!虽然它不是一种比较完美的编程语言,但是严格地说,还有其它比javas ...
JavaScipt 中的事件循环(event loop)，以及微任务和宏任务的概念
说事件循环(event loop)之前先要搞清楚几个问题. 1. js为什么是单线程的? 试想一下,如果js不是单线程的,同时有两个方法作用dom,一个删除,一个修改,那么这时候浏览器该听谁的? 2. ...
为什么JS是单线程？JS中的Event Loop(事件循环)？JS如何实现异步？setimeout？
https://segmentfault.com/a/1190000012806637 https://www.jianshu.com/p/93d756db8c81 首先,请牢记2点: (1) JS是 ...
线程的语法（event，重要）
Python threading模块 2种调用方式直接调用 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 import threading impo ...
探索.NET中事件机制（续）——虚事件和事件重写问题，微软的Bug？！
上一篇写到了微软经典的事件处理机制是通过EventHandlerList方式进行事件保存并且处理的.本节讲一个奇怪的问题--虚事件和事件重写问题(具体提问在:http://social.msdn.mi ...
JavaScript事件使用指南
事件流事件流描述的是从页面中接收事件的顺序,IE和Netscape提出来差不多完全相反的事件流的概念,IE事件流是事件冒泡流,Netscape事件流是事件捕获流.事件冒泡 IE的事件流叫做事件冒泡, ...
无埋点实现监测的真相——革新还是噱头？
转载:http://www.chinawebanalytics.cn/auto-event-tracking-good-bad-ugly/ 所谓"埋点",是数据采集领域(尤其是用户 ...

【vue】$event的理解

【vue】$event的理解相关推荐

最新文章

热门文章