vue使用$emit时,父组件无法监听到子组件的事件实例


Posted in Javascript onFebruary 26, 2018

vue使用$emit时,父组件无法监听到子组件的事件的原因是$emit传入的事件名称只能使用小写,不能使用大写的驼峰规则命名

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:ee="incrementTotal"></button-counter>
  <button-counter v-on:eEvent="incrementTotal"></button-counter>
  <child ref="cmpSelect" v-on:ee="incrementTotal" option-api-url="/api/admin/cms/cmsCategory/getOptions.do"></child>
 </div>
 <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('ee', this.counter);//有效
     this.$emit('eEvent', this.counter);//无效,不能使用大写的驼峰规则命名
    }
   },
  })
  new Vue({
   el: '#counter-event-example',
   data: {
    total: '点击下面的按钮'
   },
   methods: {
    incrementTotal: function (b) {
     this.total = b;
    }
   }
  })
 </script>

以上这篇vue使用$emit时,父组件无法监听到子组件的事件实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在JavaScript中实现命名空间
Nov 23 Javascript
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
jQuery中:checkbox选择器用法实例
Jan 03 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 Javascript
vue的全局提示框组件实例代码
Feb 26 #Javascript
Angular4 ElementRef的应用
Feb 26 #Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 #Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 #Javascript
vue bus全局事件中心简单Demo详解
Feb 26 #Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 #Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 #Javascript
You might like
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
node中的session的具体使用
2018/09/14 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
Python 基础知识之字符串处理
2017/01/06 Python
Python pymongo模块用法示例
2018/03/31 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
司马光教学反思
2014/02/01 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
企业新年寄语
2014/04/04 职场文书
销售员岗位职责
2014/06/09 职场文书
关于旅游的活动方案
2014/08/15 职场文书
青年志愿者活动方案
2014/08/17 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
SQL Server连接查询的实用教程
2021/04/07 SQL Server
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
Python实现Hash算法
2022/03/18 Python