浅谈Vue.js 组件中的v-on绑定自定义事件理解


Posted in Javascript onNovember 17, 2017

每个 Vue 实例都实现了事件接口(Events interface),即:

使用 $on(eventName) 监听事件

使用 $emit(eventName) 触发事件

Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似,但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名。

另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

下面是一个文档上面的例子:

2017年4月11日更新

<div id="counter-event-example">
 <p>{{ total }}</p>
 <button-counter v-on:increment="incrementTotal"></button-counter>
 <button-counter v-on:increment="incrementTotal"></button-counter>
</div>


Vue.component('button-counter', {
 template: '<button v-on:click="increment">{{ counter }}</button>',
 data: function () {
  return {
   counter: 0
  }
 },
 methods: {
  increment: function () {
   this.counter += 1
   this.$emit('increment')
  }
 },
})
new Vue({
 el: '#counter-event-example',
 data: {
  total: 0
 },
 methods: {
  incrementTotal: function () {
   this.total += 1
  }
 }
})

跟着这个例子我来谈谈理解,更新以前我那种错误的思想

先画出理解的步骤,跟着步骤来进行理解

浅谈Vue.js 组件中的v-on绑定自定义事件理解

步骤1:

大家先看到这里,其实在步骤4里面的自定义标签经过渲染之后是变成了如 步骤一 一样的代码,所以我们应该从这里入手理解父子组件间事件绑定。在子组件里面把点击事件(click)绑定给了函数increment(即图片里面的步骤2),这里容易理解,即点击了子组件的按钮将会触发位于子组件的increment函数

步骤2与步骤3:

increment函数被触发执行,在步骤2里面执行了一句调用函数的语句

this.$emit('increment')

我们来看一下文档

vm.$emit( event, […args] ) : 触发当前实例上的事件。附加参数都会传给监听器回调

在这里是什么意思呢?按我自己的大白话就是这样说的:

通过这句函数可以让父组件知道子组件调用了什么函数,this.$emit(‘increment') 即类似于子组件跟父组件说了一声“hi,爸爸 我调用了我自己的increment函数”,通知父组件

步骤4:

回看一下在父组件里面定义的自定义标签,可以看到

v-on:increment="incrementTotal"

什么意思呢?我们还是用大白话来解释一下

就是说“孩子,当你调用了increment函数的时候,我将调用incrementTotal函数来回应你”

这时我们回想步骤3,在子组件我们已经使用emit来进行通知,所以,这样就形成父子组件间的相互呼应传递信息,其实在开发的过程中父子组件通讯也都是使用这样的方法,父组件传递信息给子组件的时候会通过props参数,通常不会直接在子组件中修改父组件传递下来的信息,而且通过这样的一个钩子去通知父组件对某些参数进行改变

步骤5:

这个就容易理解了,上一版本是本人在初学的时候写的所以思维很不严谨,抱歉,欢迎大家指导批评

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery时间验证和转换工具小例子
Jul 01 Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
vue+axios 前端实现的常用拦截的代码示例
Aug 23 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 #Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 #Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 #Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 #Javascript
JS实现的数组去除重复数据算法小结
Nov 17 #Javascript
bootstrap轮播模板使用方法详解
Nov 17 #Javascript
浅谈Node模块系统及其模式
Nov 17 #Javascript
You might like
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
一个比较简单的PHP 分页分组类
2009/12/10 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
jquery手风琴特效插件
2015/02/04 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
详解Python字符串切片
2019/05/20 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
工程管理造价应届生求职信
2013/11/13 职场文书
化学学院毕业生自荐信范文
2013/12/17 职场文书
信访工作者先进事迹
2014/01/17 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
爱护公物标语
2014/06/24 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
网络研修随笔感言
2015/11/18 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
微信小程序实现轮播图指示器
2022/06/25 Javascript