浅谈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 ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
js Math数学简单使用操作示例
Mar 13 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
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中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
js的event详解。
2006/09/06 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
原生js实现验证码功能
2017/03/16 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
easy_install python包安装管理工具介绍
2013/02/10 Python
python正则表达式抓取成语网站
2013/11/20 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
社区党员先进事迹
2014/01/22 职场文书
薪酬专员岗位职责
2014/02/18 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
超市食品安全承诺书
2015/04/29 职场文书
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS