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

Question

我有几个表格。他们每个人都有相同的逻辑(验证，发送......)所以，我想创建一种方法来控制我的表单上的操作。现在我的代码是冗余的，因为我在每个 .vue 文件上都有相同的方法 onSubmit()。

我的 HTML:

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

我的 JavaScript(ma​​in.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

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

// 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)
  }
}