对vue.js中this.$emit的深入理解


Posted in Javascript onFebruary 23, 2018

对于vue.js中的this.emit的理解:this.emit(‘increment1',”这个位子是可以加参数的”);其实它的作用就是触发自定义函数。

看例子:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
</head>
<script src="vue.js"></script>
<body>
<div id="counter-event-example">
 <p>{{ total }}</p>
 <button-counter v-on:increment1="incrementTotal1"></button-counter>
 <button-counter v-on:increment2="incrementTotal2"></button-counter>
</div>
</body>
<script>
 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('increment1',"这个位子是可以加参数的");//触发自定义increment1的函数。此处的increment1函数就是 incrementTotal1函数。
//  this.$emit('increment2'); //此时不会触发自定义increment2的函数。
  }
 }
 });
 new Vue({
 el: '#counter-event-example',
 data: {
  total: 0
 },
 methods: {
  incrementTotal1: function (e) {
  this.total += 1;
  console.log(e);
  },
  incrementTotal2: function () {
  this.total += 1;
  }
 }
 })
</script>
</html>

对上面的例子进行进一步的解析:

1、首先看 自定组件button-counter ,给其绑定了方法 :increment;

2、点击button时会执行函数 increment,increment中有 this.$emit(‘increment1',”这个位子是可以加参数的”);

3、当increment执行时,就会触发自定函数increment1,也就是incrementTotal1函数;

4、而increment执行时没有触发自定义函数increment2,所以点击第二个按钮不执行incrementTotal2的函数。

以上这篇对vue.js中this.$emit的深入理解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript下function声明一些小结
Dec 28 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
JavaScript前端实现压缩图片功能
Mar 06 Javascript
js实现缓动动画
Nov 25 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 #Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 #jQuery
vue中动态绑定表单元素的属性方法
Feb 23 #Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 #Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 #Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 #Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 #Javascript
You might like
php下保存远程图片到本地的办法
2010/08/08 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
Python循环实现n的全排列功能
2019/09/16 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
生物技术专业研究生自荐信
2013/09/22 职场文书
采购主管工作职责
2013/12/12 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
教学质量月活动总结
2015/05/11 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
股权投资协议书
2016/03/23 职场文书