Vue 使用一个 submit() 方法的多个表单

Question

我有几种形式。它们中的每一个都有相同的逻辑(验证，发送...(，因此，我想创建一个方法来控制表单上的操作。目前我的代码是冗余的，因为我在每个.vue文件上onSubmit()相同的方法。

我的网页：

<div id="app">
<myform-one></myform-one>
<myform-two></myform-two>
</div>

my JavaScript (main.js- webpack 中的入口文件(：

import Vue from 'vue';
import Myform1 from './myform1.vue';
import Myform2 from './myform2.vue';
new Vue({
el: '#app',
components: {
myformOne: Myform1,
myformTwo: Myform2
}
});

和 VUE 组件文件：

myform1.vue：

<template>
<div>
<form @submit.prevent="onSubmit">
<input type="text" v-model="fields.fname11" />
<input type="text" v-model="fields.fname12" />
<button type="submit">submit</button>
</form>
</div>
</template>
<script>
let formfields = {
fname11: '',
fname12: ''
};
export default {
data() {
return {
fields: formfields
}
},
methods: {
onSubmit() {
// code responsible for reading, validating and sending data here
// ...
console.log(this.fields);
}
},
}
</script>

和myform2.vue：

<template>
<div>
<form @submit.prevent="onSubmit">
<input type="text" v-model="fields.fname21" />
<input type="text" v-model="fields.fname22" />
<input type="text" v-model="fields.fname23" />
<button type="submit">submit</button>
</form>
</div>
</template>
<script>
let formfields = {
fname21: '',
fname22: '',
fname23: '',
};
export default {
data() {
return {
fields: formfields
}
},
methods: {
onSubmit() {
// code responsible for reading, validating and sending data here
// ...
console.log(this.fields);
}
},
}
</script>

如何创建和使用一种通用方法submitForm()？它的代码应该在哪里(良好实践(？

Answer 1

Vue3(对我来说是类星体，但我相信它适用于任何框架(：

假设您有一个包含多种表格的父级<Forms />：

首先创建一个可组合的函数，如下所示useForms.js：

import { ref } from 'vue'
const forms = ref([])
export function useForms(){

const checkForms = () => {
forms.value.forEach((form) => form.validate()
}  
const addFormToFormsArray = (form) => {
forms.value.push(form)
}
return { forms, addFormToFormsArray, checkForms }
}

然后将其导入<Forms />：

<template>
<Form />
<Form />
<Form />
<button @click="checkForms">Check Form</button>
</template>
<script setup>
import { useForms } from '../useForms';
const { checkForms } = useForms()
</script>

最后，在<Form />里面：

<template>
<form ref="form">
.../stuff
</form>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useForms } from '../useForms';
const form = ref(null)
onMounted(() => {
addFormToFormsArray(form.value)
})
const { checkForms, addFormToFormsArray } = useForms()
</script>

在父级中执行检查功能时，它应遍历每个表单并检查是否存在任何问题。

Answer 2

创建一个包含逻辑的单独文件：

// submitForm.js
export default function (fields) {
// code responsible for reading, validating and sending data here
// ...
}

然后在组件中使用该逻辑

import submitForm from "../services/submitForm.js"
...
methods: {
onSubmit() {
submitForm(this.fields)
}
}

Answer 3

有一些选项。我最喜欢的是创建一个 mixin vue docs mixins

export const form_functionality = {
methods: {
on_submit() {
//logic of submit
},
//here we can have other reusable methods
}
}

然后在您的组件中使用该混合，如下所示：

import { form_functionality } from 'path_of_mixin'
export default {
mixins: [form_functionality]
}

最后，mixins拥有的内容(创建，方法，数据等(将被合并到组件中。 它使用混合。

因此，实际上您可以像this.on_submit()一样访问mixin方法。