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

Question

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

我的 HTML：

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

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

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

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

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

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

最后，mixin 所拥有的内容（创建的、方法、数据等）将被合并到使用该 mixin 的组件中。

所以，实际上你可以访问 mixin 方法，例如this.on_submit()