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 动态生成方法的例子
Jul 22 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
React优化子组件render的使用
May 12 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
Vue实现滑动拼图验证码功能
Sep 15 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
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
python元组操作实例解析
2014/09/23 Python
Python3处理文件中每个词的方法
2015/05/22 Python
详解python中executemany和序列的使用方法
2017/08/12 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
简单了解python中对象的取反运算符
2019/07/01 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
python实现学生成绩测评系统
2020/06/22 Python
python中sys模块是做什么用的
2020/08/16 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
C#笔试题和英文面试题
2013/02/07 面试题
文明社区申报材料
2014/08/21 职场文书
党性教育心得体会
2014/09/03 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python
Java tomcat手动配置servlet详解
2021/11/27 Java/Android