使用 Composition API 在 Vue 中处理子项和父项中的提交事件

Posted 2023-02-22

【中文标题】使用 Composition API 在 Vue 中处理子项和父项中的提交事件

【英文标题】：Handle submit event in child then parent in Vue using Composition API

【发布时间】：2020-11-24 19:08:56

【问题描述】：

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

我收到此错误... [Vue 警告]：v-on 处理程序中的错误：“TypeError: undefined is not an object (evalating '$event.preventDefault')” 在发现 ---> 在 src/components/MyForm.vue 在 src/App.vue

子组件是 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
    
  ,
)

父组件（App）...

<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>

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

【问题讨论】：

您也应该发布该错误。您不需要父组件中的@submit 中的.prevent，因为您处理的不是表单提交而是自定义组件事件。因此，只需在您的父母中执行 @submit="onSubmit" 即可。不知道这是否可以解决错误，因为我不知道您的错误是什么。为了让事情更清楚，您可以将发出的事件重命名为 validSubmit

谢谢马蒂亚斯！问题是父级的 .prevent 。为了使我的问题更完整，我包含了上面的错误。您想将您的建议作为解决方案发布，以便我将其标记为正确吗？

【参考方案1】：

TL;DR:

从您的父应用中删除 .prevent。

解释：

如 cmets 中所述，您自己的父组件中不需要 .prevent。事件上的.prevent 基本上可以防止默认事件传播。因此，例如，在您的form(@submit.prevent='onFormSubmit' 中，当您的表单正常提交时（例如通过按 Enter），正常的提交事件被阻止，而是调用您的方法 onFormSubmit。

但在您的父组件中，没有要阻止的默认 javascript 事件。 这就解释了为什么你有错误TypeError: undefined is not an object (evaluating '$event.preventDefault') - 没有$event，所以它是undefined。而undefined 不是对象。