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 相关文章推荐
JavaScript浏览器选项卡效果
Aug 25 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
iframe子页面获取父页面元素的方法
Nov 05 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
详解angular中的作用域及继承
May 31 Javascript
详解vue表单——小白速看
Apr 08 Javascript
javascript实现一款好看的秒表计时器
Sep 05 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异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
学习ExtJS accordion布局
2009/10/08 Javascript
window.dialogArguments 使用说明
2011/04/11 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
深入理解Python3中的http.client模块
2017/03/29 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
详解python中init方法和随机数方法
2019/03/13 Python
python实现AES加密与解密
2019/03/28 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
一年级家长会邀请函
2014/01/25 职场文书
关于读书的演讲稿
2014/05/07 职场文书
个人租房协议书样本
2014/10/01 职场文书
周年庆典答谢词
2015/01/20 职场文书
水电工程师岗位职责
2015/02/13 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
《角的度量》教学反思
2016/02/18 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
React实现动效弹窗组件
2021/06/21 Javascript
css3带你实现3D转换效果
2022/02/24 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS
Hive导入csv文件示例
2022/06/25 数据库