Vue $emit()不能触发父组件方法的原因及解决
更新时间：2020年07月28日 09:59:57 作者：小小米粒吖
这篇文章主要介绍了Vue $emit()不能触发父组件方法的原因及解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
$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()不能触发父组件方法的原因及解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vscode中Vue别名路径提示的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
等比例缩放可以在不同的分辨率下都能够一屏展示,不会有滚动条的问题,也不会有适配问题,下面这篇文章主要给大家介绍了关于vue项目网页自适应等比例放大缩小的相关资料,需要的朋友可以参考下2022-11-11
uni-app是一款基于Vue.js的跨平台开发框架，它借助了 Vue.js 的语法和组件化开发思想，本文将详细介绍 uni-app 的全局配置、静态资源管理、路由管理以及数据通信和状态管理的进阶使用技巧,需要的朋友可以参考下2023-06-06
在Vue中,有两种常用的CSS选择器,用于修改组件样式：scoped 和 /deep/（或 ::v-deep）,它们都是为了实现样式的作用域,本文小编就来分别给大家介绍一下这两种选择器的原理,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了Vue项目build后,图片加载不出来的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了vue如何实现路由跳转到外部链接界面，具有很好的参考价值，希望对大家有所帮助。2022-10-10
这篇文章主要介绍了vue打包生成的文件的js文件过大的优化方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
在Vue中可以使用Vue.prototype向Vue的全局作用域添加属性或方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-06-06
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
本篇文章主要介绍了详解使用Vue Router导航钩子与Vuex来实现后退状态保存，具有一定的参考价值，有兴趣的可以了解一下2017-09-09
这篇文章主要介绍了如何使用vue-router插件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最新评论