Vue.js：有没有办法让@submit.prevent出现在一个项目的所有表单上？

Question

我意识到有一些片段是我每次都在重复的，有时我也会忘记。

其中之一是 @submit.prevent. 在所有的表单中，我必须写上防止提交，我总是通过vue方法管理提交。

所以我可以做一些事情，所有的表单都有这个指令隐含？

Answer 1

你可以创建一个简单的（可能是功能性的）组件，然后用它来代替普通的 <form>.

// BaseForm.vue

<template>
  <form @submit.prevent="onSubmit">
    <slot />
  </form>
</template>

<script>
export default {
  props: {
    onSubmit: {
      type: Function,
      required: true,
    }
  }
}
</script>

你不会真正节省很多代码，但你不必再考虑它。你可以加入基本的 <button type=submit></button> 在这里也是。