浅谈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 相关文章推荐
js实现全屏漂浮广告移入光标停止移动
Dec 02 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
微信用户访问小程序的登录过程详解
Sep 20 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 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
php部分常见问题总结
2008/03/27 PHP
php打开文件fopen函数的使用说明
2013/07/05 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
PHP编写RESTful接口
2016/02/23 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
javascript 类方法定义还是有点区别
2009/04/15 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
Python 元组(Tuple)操作详解
2014/03/11 Python
Python返回真假值(True or False)小技巧
2015/04/10 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
python实现反转部分单向链表
2018/09/27 Python
pyshp创建shp点文件的方法
2018/12/31 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
python三引号如何输入
2020/07/06 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
公共场所禁烟标语
2014/06/25 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
求职自我评价范文100字
2014/09/23 职场文书
2014年法院工作总结
2014/11/24 职场文书
英文道歉信
2015/01/20 职场文书
北京颐和园导游词
2015/01/30 职场文书
网络研修随笔感言
2015/11/18 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书