对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 比较两个Json对象的值是否相等的实例
Nov 20 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
node通过express搭建自己的服务器
Sep 30 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
element-ui 本地化使用教程详解
Oct 28 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
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
flash 得到自身url参数的代码
2009/11/15 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
介绍Python中的文档测试模块
2015/04/28 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
python如何实现异步调用函数执行
2019/07/08 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
python程序 创建多线程过程详解
2019/09/23 Python
linux 下selenium chrome使用详解
2020/04/02 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
高中体育教学反思
2014/01/29 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript