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 相关文章推荐
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
JavaScript实现抖音罗盘时钟
Oct 11 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
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
详解python破解zip文件密码的方法
2020/01/13 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
市三好学生主要事迹
2014/01/28 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技