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-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
浅析JS运动
Dec 28 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
React 组件间的通信示例
Jun 14 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 Javascript
Vue获取微博授权URL代码实例
Nov 04 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
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
PHP高自定义性安全验证码代码
2011/11/27 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
Python help()函数用法详解
2014/03/11 Python
python爬虫常用的模块分析
2014/08/29 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
Python txt文件如何转换成字典
2020/11/03 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
会展策划与管理专业求职信
2014/06/09 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
离职告别感言
2015/08/04 职场文书
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python