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

【问题标题】：the $emit Vue method on parent does't work , but on child it works父级上的 $emit Vue 方法不起作用，但在子级上它起作用
【发布时间】：2019-09-04 01:02:48
【问题描述】：

我有一个组件注册并通过 $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>

在我的 vue 主 js 上

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

我试图控制该方法 handleRegister，但什么也没发生，也没有错误，这是我的父组件缺少的东西吗？

【问题讨论】：

标签： javascript vue.js dom vuejs2 vue-component

【解决方案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。因此，如果您仍然喜欢在不使用 kebab-case 命名法的情况下发出事件，那么您需要这样做：

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

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

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

【讨论】：