在Vue中处理子提交事件，然后使用组合API处理父提交事件

Question

Vue.js新手，尝试在表示表单的组件中处理提交事件，该表单将检查子组件的有效性，并在一切正常的情况下将处理传递给父组件中的事件处理程序。

我得到这个错误。。。[Vue warn]：v-on处理程序中的错误：“TypeError:undefined不是在中找到的对象（计算“$event.preventDefault”）”---

子组件是MyForm。。。

<template lang="pug">
  form(@submit.prevent='onFormSubmit', novalidate, autocomplete='on')
    slot Content needed in MyForm
</template>

<script lang="ts">
import { defineComponent } from "@vue/composition-api"
export default defineComponent({
  name: "MyForm",
  setup(_, { emit }) {
    const onFormSubmit = () => {
      console.log("MyForm:onFormSubmit() - called first")
      // Validate child components, if invalid, STOP, otherwise continue...
      emit("submit") // errors
    }
  },
})

父组件（应用程序）。。。

<template lang="pug">
#app
  .container
    MyForm(@submit.prevent='onSubmit')
      ...other components
</template>

<script lang="ts">
import { defineComponent } from "@vue/composition-api"
import MyForm from "@/components/MyForm.vue"

export default defineComponent({
  name: "App",
  components: {
    MyForm,
  },
  setup() {
    const onSubmit = (): void => {
      console.log("App.vue:onSubmit() - called second")
    }
    return { onSubmit }
  }
</script>

或者，将应用程序的onSubmit（）函数作为道具传递给MyForm会更好吗？我可以在MyForm中进行验证，然后调用传入函数？

Answer 1

TL；博士：

从父应用程序中删除。阻止。

说明：

如注释中所述，您不需要在自己的父组件中使用.prevent。事件上的.prevent基本上阻止了默认事件的传播。因此，例如，在您的表单（@submit.prevent='onFormSubmit'）中，当您的表单通常会被提交时（例如按enter键），正常提交事件将被阻止，而您的方法onFormSubmit将被调用。

但在父组件中，没有要防止的默认javascript事件。这就解释了为什么会出现错误TypeError:undefined不是对象（计算“$event.preventDefault”）-没有$event，因此它是undefined。而未定义不是对象。