метод $ emit Vue для parent не работает, но для child он работает

Question

У меня есть компонентный регистр и добавлено событие @ submit.prevent в шаблоне с помощью $ emit, я попытался console.log для компонента метода inisde, он работал, но когда на моем основном 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>

и по моему vue main 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, где имена атрибутовбез учета регистра - браузер фактически преобразует его в нижний регистр .Поэтому, если вы по-прежнему предпочитаете генерировать событие без использования номенклатуры в кебаб-кейсе, вам необходимо выполнить:

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

А в шаблоне родительского потребителя вам нужно будет прослушать doregister событие:

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