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 相关文章推荐
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
Jun 04 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
JavaScript获取一个范围内日期的方法
Apr 24 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 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
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
PHP7新特性
2021/03/09 PHP
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
Python深入学习之对象的属性
2014/08/31 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
Python sublime安装及配置过程详解
2020/06/29 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
python实现银行账户系统
2021/02/22 Python
质检部岗位职责
2013/11/11 职场文书
物流管理专业职业生涯规划书
2014/01/06 职场文书
教师申诉制度
2014/01/29 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
python实现简单反弹球游戏
2021/04/12 Python
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏