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>

在我的Vue主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。因此，如果您仍然希望在不使用kebab-case命名法的情况下发出事件，则需要执行以下操作：

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

在使用方父母的模板中，您将需要监听doregister事件：

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

在父级上使用$ emit Vue方法无效，但在子级上使用$ emit Vue方法

1 个答案: