对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:history.go()和History.back()的区别及应用
Nov 25 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
Python 文件重命名工具代码
2009/07/26 Python
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
Python实现多行注释的另类方法
2014/08/22 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
使用Scrapy爬取动态数据
2018/10/21 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
J2EE中的容器都包括哪些
2013/08/21 面试题
学生实习自我鉴定
2013/10/11 职场文书
兼职学生的自我评价
2013/11/24 职场文书
九年级历史教学反思
2014/01/27 职场文书
阿德的梦教学反思
2014/02/06 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
安全承诺书范文
2014/03/26 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
大学生就业意向书
2015/05/11 职场文书
债务追讨律师函
2015/06/24 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
Java如何实现树的同构?
2021/06/22 Java/Android