浅谈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.ui.progressbar 中文文档
Nov 26 Javascript
Javascript的闭包
Dec 31 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
jQuery.extend 函数详解
Feb 03 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
详解React服务端渲染从入门到精通
Mar 28 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
递归列出所有文件和目录
2006/10/09 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
python清除字符串里非字母字符的方法
2015/07/02 Python
Django框架中方法的访问和查找
2015/07/15 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
国旗下的讲话演讲稿
2014/05/08 职场文书
工作作风承诺书
2014/08/30 职场文书
学生打架检讨书
2014/10/20 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python