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

总结

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