浅谈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 相关文章推荐
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
基于jquery插件编写countdown计时器
Jun 12 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
Dec 21 Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
微信小程序的引导页实现代码
Jun 24 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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
企业党员公开承诺书
2014/03/26 职场文书
优秀家长事迹材料
2014/05/17 职场文书
日语系毕业求职信
2014/07/27 职场文书
2014年保洁工作总结
2014/11/24 职场文书
员工手册编写范本
2015/05/14 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
化工生产实习心得体会
2016/01/22 职场文书
创业计划书之酒厂
2019/10/14 职场文书