Vue $emit()不能触发父组件方法，Vue子组件向父组件使用自定义事件$emit传递数据无效的坑

最新推荐文章于 2025-04-01 14:09:29 发布

百事可乐☆

最新推荐文章于 2025-04-01 14:09:29 发布

阅读量1.2k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_61672533/article/details/128537732

版权

文章讨论了在Vue.js中使用$emit时遇到的问题，即自定义的事件名不支持驼峰式命名。提供了解决方案，可以通过使用$parent来传递参数或调用方法，如this.$parent.orderChange(row)。这种方法绕过了命名限制，实现了父子组件间的通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决方法（1）

$emit里面自定义得值不支持驼峰式

解决方法（2）

this.$parent.orderChange(row);

使用$parent后面跟参数或者方法名

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

百事可乐☆

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue $emit()不能触发父组件方法的原因及解决

12-28

$emit传入的事件名称只能使用小写，不能使用大写的驼峰规则命名如果修改后还是不行的话，就改用： this.$parent.Event (Event为父组件中的自定义方法) 补充知识：Vue.js 使用 $emit 触发事件填坑 vue的组件内触发外部事件不起作用 vue的组件内触发自定义事件（发外部事件）不起作用今天学习vue的自定义组件功能，在组件内部触发一个事件，在使用组件的地方使用v-on绑定这个事件，然而触发一直不生效，检查了很多遍的代码都没看出什么问题，代码如下： <button v-on:click=IncrHandle>增加</bu

Vue 父子组件方法this.$emit()有时候不触发问题

qq_41580802的博客

10-26

8722

Vue 父子组件方法this.$emit()有时候不触发问题，亲测有效

参与评论您还未登录，请先登录后发表或查看评论

Vue.js 中 `$emit` 事件未监听的问题及解决方案

最新发布

有我更精彩的博客

04-01

618

Vue.js 中$emit事件未被监听是开发中常见的问题之一。通过检查事件名称拼写、确保父组件正确监听事件、确保事件触发时机正确、清理事件监听器以及使用 Vue 3 的emits选项，可以有效解决这些问题。希望本文的介绍能帮助你在 Vue.js 开发中更好地使用$emit，提升组件间通信的效率和可靠性。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作📚《Vue.js 3企业级项目开发实战（微课视频版》

vue子组件调用父组件方法$emit调用不到的问题

爱心觉罗

08-18

1211

【代码】vue子组件调用父组件方法$emit调用不到的问题。

vue2中$emit传参父组件没有触发

范天缘的博客

06-01

1255

vue2

Vue $emit()不触发方法的原因

weixin_44880056的博客

07-14

4167

Vue $emit()不触发方法的原因 1.事件名称不全是小写。事件名称要求全小写。 2.不是父子关系。这里的父子关系是严格的父子关系，祖孙关系也不行。只能一层一层触发，这在写树形组件时，很容易掉坑里。 3.父组件没有用 .sync修饰符 .sync是vue中用于实现简单的“双向绑定”的语法糖，在平时的开发中是非常使用的。 vue的prop是单向下行绑定：父级的prop的更新会向下流动到子组件中，但是反过来不行。可是有些情况，我们需要对prop进行“双向绑定”。这个时候，就可以用.sync来解决。 ...

解决Vue.js父组件$on无法监听子组件$emit触发事件的问题

10-18

与之对应，$emit方法是让子组件通过自定义事件向父组件发送消息，触发父组件上的监听事件。在实际开发中，有时候我们可能会遇到父组件无法监听到子组件通过$emit发出的事件。这通常是因为事件的触发和监听没有在...

Vue $emit $refs子父组件间方法的调用实例

10-18

在子组件中，`$emit`方法用于触发一个事件，并且可以携带数据向父组件传递。父组件可以监听这个事件，并定义相应的处理方法来接收数据。在给定的文件中，子组件通过一个按钮的点击事件来触发`my-event`事件，并将`...

关于Vue子组件调用父组件函数方法不成功的情况

add-oil的博客

08-01

1736

主要比较两种调用方法：this.parent.func()∗∗和∗∗this.parent.func()**和**this.parent.func()∗∗和∗∗this.emit(‘func’) 项目原来使用this.parent.func(),在一层子组件尚行，未出现bug,但是多层子组件嵌套时，最好使用this.parent.func(),在一层子组件尚行，未出现bug,但是多层子组件嵌套时，最好使用this.parent.func(),在一层子组件尚行，未出现bug,但是多层子组件嵌套时，最好使用th

$emit()不触发父组件方法 Vue

alintever的博客

09-16

2473

同样的错误犯了两遍特此记录方法没有写在Vue methods: {} 内 <template> <BankList @foo="bar"></BankList> </template> <script> methods: { // 写在methods内部才能接收到,有时候写到外面半天没找到原因也没报错,这么个错误找个一个小时 bar() { } } </script> $emit() 触发的是子节点,.

$emit()不触发父组件方法

weixin_41700532的博客

02-24

2729

问题原因及解决： 1、$emit的事件用了驼峰命名，有的浏览器会自动转化为小写，所以就匹配不到；解决：都改为小写或者是用’-'隔开，比如: this.$emit('callbackFn'); @callback-fn="xxx" 2、this.$emit触发的是子节点，监听的节点是父节点解决：将触发事件放在父节点触发 this.$parent.$emit('xxxx'); ...

vue 弹框使用this.$emit调用父组件方法及传参无效 (已解决)

蓝胖子的博客

10-18

6654

子组件中调用父组件方法及传参 this.$emit无效的问题最神奇的是并不是所有的emit都失效，只是有些emit的方法名在特定情况下失效。在项目中刚开始用的是 this.$emit(“方法名”,‘参数’) this.$emit("fathermethod", this.labelTableData); this.$emit 无效. 解决方法: 使用this.$parent.方法名(“参数”)调用 // 关闭弹窗 close() { this.detailVisible

Vue子组件递归导致this.$emit失效，父组件监听不到

qq_53121751的博客

10-27

2308

Vue子组件递归导致this.$emit失效，父组件监听不到

vue3中组件递归，子组件emit事件失效解决办法

qq_52273262的博客

01-08

2721

在嵌套的子组件加上emit事件的监听，缺点就是控制台有警告。用vuex / pinia 代替父子通信。

vue.js中this.$emit和this.$parent失效

a983677218的博客

08-29

829

然后就是在子组件中调用父类方法时，如果父类会对传到子类的参数进行修改时候，控制台会报错。建议如果需要修改，则在子组件中定义data对应传进来的参数，并通过watch监听传进来的参数改变data值，这样就不会报错。/> 这样在子组件中才能使用this.$emit（‘sun’,param）,这里sun就是父类的parent方法。在开发过程中偶然遇到在子组件中用this.$emit和this.$parent调用父组件都失效。使用Vue进行组件化开发，少不了组件间的方法调用，和方法传递。

vue $emit 执行父组件的方法不执行

陈熙之的博客

02-06

831

vue $emit 执行父组件的方法不执行

vue $emit()不能触发父组件方法的原因及解决

05-01

在使用Vue的$emit() 方法时，有时候会发现不能触发父组件方法。这通常是由于传递给$emit()方法的事件名称与父组件中方法名称不一致所导致的。在父组件中需要监听的事件名称和$emit()方法中传递的事件名称必须一致，才能正确地触发父组件的方法。此外，还需要确保父组件中已经正确地定义了需要监听的事件名称，即使用v-on指令监听事件。这通常是通过在父组件中使用“@事件名称”或“v-on:事件名称”来实现的。如果仍然无法触发父组件方法，可以在父组件中使用Vue的$on方法手动绑定事件并监听。例如，在父组件中，可以使用以下方式来监听事件： mounted() { this.$on('child-event', () => { this.parentMethod(); }); } 这样，在子组件中使用$emit('child-event')方法就能够正确地触发父组件中定义的parentMethod()方法了。总之，不能触发父组件方法的原因通常是事件名称不一致或未正确定义事件监听。解决方法包括确保事件名称一致并正确定义事件监听，或者使用$on手动绑定事件监听。