对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 中文字符串处理额外注意事项
Nov 15 Javascript
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
js完整倒计时代码分享
Sep 18 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 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 MYSQL 数据备份类
2009/06/19 PHP
PHP技术开发技巧分享
2010/03/23 PHP
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
python BeautifulSoup使用方法详解
2013/11/21 Python
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
Python实现网站表单提交和模板
2019/01/15 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
python 多进程队列数据处理详解
2019/12/23 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
程序员跳槽必看面试题总结
2013/06/28 面试题
四年的个人工作自我评价
2013/12/10 职场文书
乐观大学生的自我评价
2014/01/10 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书