浅谈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 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
react项目从新建到部署的实现示例
Feb 19 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
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
php curl基本操作详解
2013/07/23 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
python3.5仿微软计算器程序
2020/03/30 Python
简单谈谈Python流程控制语句
2016/12/04 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
视光学毕业生自荐书范文
2014/02/13 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
监理中标通知书
2015/04/16 职场文书
原生JS实现分页
2022/04/19 Javascript
Android中的Launch Mode详情
2022/06/05 Java/Android