Vue父子组件方法this.$emit()有时候不触发问题及解决
更新时间：2024年05月23日 16:34:26 作者：一个敲代码不秃头的俗人
这篇文章主要介绍了Vue父子组件方法this.$emit()有时候不触发问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue父子组件方法this.$emit()有时候不触发
问题
当Vue使用this.$emit时，父组件无法触发监听事件
原因
（1）this.$emit(‘MyEmit’);使用了驼峰命名发
（2）没用使用this.$nextTick();
（3）还有可能是用了弹窗这一类组件，在调用this.$emit("MyEmit")前，先关闭了弹窗，导致事件被销毁，所以，应该在在关闭弹窗之前先调emit方法；
解决
this.$nextTick(() => {
this.$emit("myemit")
//或者
this.$emit("my-emit")
});Vue $emit()不触发方法的分析
1.事件名称不全是小写。事件名称要求全小写。
2.不是父子关系。这里的父子关系是严格的父子关系，祖孙关系也不行。只能一层一层触发，这在写树形组件时，很容易掉坑里。
3.父组件没有用 .sync修饰符
.sync是vue中用于实现简单的“双向绑定”的语法糖，在平时的开发中是非常使用的。
vue的prop是单向下行绑定：
父级的prop的更新会向下流动到子组件中，但是反过来不行。
可是有些情况，我们需要对prop进行“双向绑定”。
这个时候，就可以用.sync来解决。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue-quill-editor富文本编辑器超详细入门使用步骤
vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想,所以果断使用vue-quill-editor来实现,下面这篇文章主要给大家介绍了关于vue-quill-editor富文本编辑器入门使用步骤的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue组件中添加@click失效问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了如何解决vue2.0下IE浏览器白屏问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
在Vue中,KeepAlive组件是一种特殊的组件,用于缓存已经渲染过的组件实例,本文主要为大家详细介绍了KeepAlive组件的用法,需要的小伙伴可以参考下2023-09-09
这篇文章主要介绍了vue导入新工程 “node_modules依赖”问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
在实际应用场景中,假如有一个下载或者导出请求,数据量非常大的情况下,接口响应的会很慢,这时候我我们想中断请求,该怎么做呢？本文给大家介绍了axios请求中断的几种方法,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了在 Vue 中控制表单输入方法详解的相关资料,需要的朋友可以参考下2023-04-04
DeepSeek 助力 Vue 开发丝滑的表单验证Form Validation功能
文章介绍了如何使用Vue3的组合式API创建一个表单验证组件,并提供了详细的代码示例,组件支持双向绑定、自定义验证规则、样式和布局等功能,还涵盖了组件的调用示例、路由配置和页面展示入口2025-02-02
这篇文章主要介绍了Vue常用API、高级API的相关总结，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-02-02
这篇文章主要介绍了vue如何给页面增加url前缀问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
最新评论