对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二级地域选择的实现方法
Jun 17 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
解读ES6中class关键字
Nov 20 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
Vue如何清空对象
Mar 03 Vue.js
基于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教程 预定义变量
2009/10/23 PHP
php join函数应用
2011/05/04 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
python 全文检索引擎详解
2017/04/25 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
详解Python 函数如何重载?
2019/04/23 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
实体的生命周期
2013/08/31 面试题
护士自荐信范文
2013/12/15 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers