对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 相关文章推荐
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
jquery图片切换插件
Mar 16 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
三种带箭头提示框总结实例
Jun 14 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
图文讲解vue的v-if使用方法
Feb 11 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
1.PHP简介
2006/10/09 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python中自定义函数的教程
2015/04/27 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
骆驼官方商城:CAMEL
2016/11/22 全球购物
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
幼儿园毕业园长感言
2014/02/24 职场文书
战略合作协议书范本
2014/04/18 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS