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 清除输入框中的数据
Apr 13 Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
JS实现纸牌发牌动画
Jan 19 Javascript
关于JavaScript回调函数的深入理解
Jun 27 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
一个图形显示IP的PHP程序代码
2007/10/19 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
用jquery来定位
2007/02/20 Javascript
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
javascript背投广告代码的完善
2008/04/08 Javascript
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
Python抽象类的新写法
2015/06/18 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
Python测试线程应用程序过程解析
2019/12/31 Python
pytorch中图像的数据格式实例
2020/02/11 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
学习党章思想汇报
2014/01/07 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
2014年资料员工作总结
2014/11/18 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python
详解Vue router路由
2021/11/20 Vue.js
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers