父级上的$emit Vue方法不起作用，但在子上起作用

Question

我有一个组件寄存器，并通过@submit.prevent在模板中添加事件$emit，我尝试在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事件呢？在这种情况下，您将需要以全小写字符串的形式发出它。

请注意，内联绑定事件名必须是不区分大小写的，由于HTML中的限制，其中属性名称不区分大小写浏览器实际上将其转换为小写。。因此，如果您仍然倾向于在不使用kebab-case命名的情况下发出事件，那么您需要这样做：

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

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

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