父对象的$ emit Vue方法不起作用，但对于它可以正常工作

Question

我有一个组件寄存器，并在模板中通过$ emit添加事件@ submit.prevent，我尝试在inisde方法组件上的console.log，它是有效的，但是在我的主要js上，它不起作用，但没有，但是不是错误

这是我的组件示例：

Vue.component("register", {
  props: {
    form: Object
  },
  template: `
  <div class="container">
    <div class="row">
      <div class="col-sm-4 offset-4">
        <form @submit.prevent="goRegister">
          <div class="form-group">
            <label for="username">username</label>
            <input type="text" class="form-control" id="usernameRegister" aria-describedby="emailHelp" placeholder="Enter username" v-model.trim="form.username" required>
</form>
    </div>
  </div>
</div>
  `,
  methods: {
    goRegister() {
      this.$emit("doRegister", this.form);
    }
  }
});

这是我的html上的父母：

 <register v-on:do-register="handleRegister" :form="forms"> </register>

在我的主要js上

new Vue({
   data:{
   forms: {
      username: null,
      email: null,
      password: null,
      name: null,
      age: null
}
}, 
methods : {
    handleRegister() {
      console.log(this.forms.username);
    }
}
})

我试图控制该方法handleRegister，但没有发生任何事情而不是错误，我的父组件上缺少什么？

Answer 1

只需重命名您正在发出的事件：VueJS不会在发出的事件名称之间转换camelCase和kebab-case。如果你想听do-register事件，你需要发出事件为do-register而不是doRegister：

this.$emit('do-register', this.form);

---

如果您仍想发出doRegister事件怎么办？在这种情况下，您需要将其作为全小写字符串发出。

请注意，内联的绑定事件名称必须不区分大小写，due to a limitation in HTML, where attribute names are case-insensitive—the browser actually converts it to lowercase。因此，如果您仍然希望在不使用烤肉串案例命名法的情况下发出事件，那么您需要执行以下操作：

this.$emit('doregister', this.form);

在消费父母的模板中，您需要收听doregister事件：

<register v-on:doregister="handleRegister" :form="forms"> </register>