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来解决。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vite+vue3项目中使用SVG方式
这篇文章主要介绍了vite+vue3项目中使用SVG方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vue.js每天必学之组件与组件间的通信
Vue.js每天必学之组件与组件间的通信,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
Vue2 使用 Echarts 创建图表实例代码
本篇文章主要介绍了Vue2 使用 Echarts 创建图表实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
vue 点击按钮路由跳转指定页面的实现方式
这篇文章主要介绍了vue 点击按钮路由跳转指定页面的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue使用pages构建多页应用的实现步骤
在大部分实际场景中,我们都可以构建单页应用来进行项目的开发和迭代,然而对于项目复杂度过高或者页面模块之间差异化较大的项目,我们可以选择构建多页应用来实现,那么什么是多页应用,本文就给大家介绍了Vue使用pages构建多页应用的实现步骤
2024-12-12
Vue中的computed与watch底层实现原理最佳实践
本文介绍Vue中computed和watch的底层实现原理,对比了核心概念、设计差异以及使用场景,通过分析computed的初始化、依赖追踪、缓存机制,以及watch的初始化、深度监听、异步更新,本文提供了一个全面的对比总结,并给出了性能优化和最佳实践建议,感兴趣的朋友一起看看吧
2026-01-01
Vue3中pinia用法示例
这篇文章主要介绍了Vue3中使用pinia,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-07-07
vue单向以及双向数据绑定方式(v-bind和v-model的使用)
这篇文章主要介绍了vue单向以及双向数据绑定方式(v-bind和v-model的使用)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vue框架下部署上线后刷新报404问题的解决方案(推荐)
这篇文章主要介绍了vue框架下部署上线后刷新报404问题解决方案,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
TypeScript中集成Tween.js踩坑记录
这篇文章主要介绍了TypeScript中集成Tween.js踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01