对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 相关文章推荐
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
js动态拼接正则表达式的两种方法
Mar 04 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 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中$_FILES的使用以及注意事项
2013/07/05 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
动态控制Table的js代码
2007/03/07 Javascript
jQuery 操作XML入门
2008/12/25 Javascript
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
python对数组进行反转的方法
2015/05/20 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
.net面试题
2015/12/22 面试题
2014年三八妇女节活动总结
2014/03/01 职场文书
行政部岗位职责范本
2014/03/13 职场文书
企业安全生产标语
2014/06/06 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
爱国影片观后感
2015/06/18 职场文书
医院感染管理制度
2015/08/05 职场文书
如何在Python项目中引入日志
2021/05/31 Python