Vue $emit()不能触发父组件方法的原因及解决


Posted in Javascript onJuly 28, 2020

$emit传入的事件名称只能使用小写,不能使用大写的驼峰规则命名

如果修改后还是不行的话,就改用:

this.$parent.Event (Event为父组件中的自定义方法)

补充知识:Vue.js 使用 $emit 触发事件填坑

vue的组件内触发外部事件不起作用

vue的组件内触发自定义事件(发外部事件)不起作用

今天学习vue的自定义组件功能,在组件内部触发一个事件,在使用组件的地方使用v-on绑定这个事件,然而触发一直不生效,检查了很多遍的代码都没看出什么问题,代码如下:

<div id="app">
 <button v-on:click="IncrHandle">增加</button>
 <input v-model="total" placeholder="请输入内容" />
 <child v-bind:count="total" v-on:onIncr="IncrHandle"></child>
</div>
Vue.component("child",{
 props:['count'],
 template:"<button v-on:click='incr'>增加{{count}}</button>",
 data: function(){
 return {
  count: 0
 }
 },
 methods:{
 incr: function(){
  this.$emit('onIncr')
  this.count += 1
 }
 }
})
new Vue({
 el:"#app",
 data:{
 total: 0
 },
 methods:{
 IncrHandle:function(){
  this.total += 1
  total("增加1")
 },
 DncrHandle:function(){
  this.total -= 1
 }
 }
})

经过无数的验证,终于找到了解决办法:

保证待传递的事件名称为纯小写。不可以使用驼峰j格式。

即:

将v-on:onIncr改为v-on:onincr,将this.emit(′onIncr′)改为this.emit('onIncr')改为this.emit( ′ onIncr ′ )

改为this.emit(‘onincr')

以上这篇Vue $emit()不能触发父组件方法的原因及解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐base.js
Dec 23 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
jquery实现全屏滚动
Dec 28 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 #Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 #Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 #Javascript
vue中touch和click共存的解决方式
Jul 28 #Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 #Javascript
JavaScript中window和document用法详解
Jul 28 #Javascript
vue中echarts引入中国地图的案例
Jul 28 #Javascript
You might like
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
JS回调函数深入理解
2019/10/16 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
Python 爬虫图片简单实现
2017/06/01 Python
python模块之paramiko实例代码
2018/01/31 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
Python3 读取Word文件方式
2020/02/13 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
外贸业务员的岗位职责
2013/11/23 职场文书
产品质量承诺范本
2014/03/31 职场文书
酒店节能降耗方案
2014/05/08 职场文书
责任书格式
2015/01/29 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS
opencv 分类白天与夜景视频的方法
2021/06/05 Python
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
Java tomcat手动配置servlet详解
2021/11/27 Java/Android