对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 相关文章推荐
JS打印gridview实现原理及代码
Feb 05 Javascript
jquery 日期控件datepicker属性详细解析
Nov 08 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 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中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
PHP函数积累总结
2019/03/19 PHP
文本链接逐个出现的js脚本
2007/12/12 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
python与字符编码问题
2019/05/24 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
店长岗位职责
2013/11/21 职场文书
总裁岗位职责
2013/12/04 职场文书
暑期社会实践学生的自我评价
2014/01/09 职场文书
单位人事专员介绍信
2014/01/11 职场文书
公开服务承诺制度
2014/03/26 职场文书
装修活动策划方案
2014/08/27 职场文书
学校创先争优活动总结
2014/08/28 职场文书
办公室岗位职责
2015/02/04 职场文书
公务员年终个人总结
2015/02/12 职场文书
求职意向书范本
2015/05/11 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python