Question

这是Child Componen的功能

signUp() {
  if (this.$refs.form.validate()) {
    this.$emit('loadcard', true); //firing
    this.$fireAuth
      .createUserWithEmailAndPassword(this.mail, this.pw)
      .then(() => {
        this.$toast('Registered successfully'); // firing
        this.$emit('loadcard', false); // Not firing
        this.$emit('closemodal'); // Not firing
      })
      .catch(error => {
        const errorCode = error.code;
        let msg = '';
        if (errorCode === 'auth/weak-password') {
          msg = 'The password is too weak.';
        } else if (errorCode === 'auth/email-already-in-use') {
          msg = 'The email is already in use.';
        } else msg = error.message;

        this.$toast(msg, {
          color: 'red',
          dismissable: true,
          x: 'center',
          y: 'top'
        });

        this.$emit('loadcard', false); // Not firing
      });
  }
}

即使已到达代码点，我注释的发射也不会触发。这是父组件声明：

<sign-up
   @closemodal="dialog = false"
   @loadcard="switchLoading"
>
</sign-up>

Answer 1

一切看起来不错，但是我想问题可能与this.$toast有关。

因此请尝试将其删除，并检查其是否到达then或catch的最后一行

Answer 2

如注释中所述，嵌套函数中的this不是this。在闭包的顶层分配var me = this，然后在其余函数中使用它。

虽然我们在这里，但您正在Vue组件中进行一些应用程序范围的繁重工作（创建新用户），因此，您的代码肯定会大量使用$ emit。另一种方式是可能的。您可以将这些序列从Vue中移出，进入全局范围，在这里它们可以直接修改商店，然后使用Vue的反应系统（而非贫血事件系统）来传播更改。

Vue发射不会被解雇/接收

2 个答案: