Question

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

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

有一些选择。我最喜欢的是创建一个混合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]
}

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

因此，实际上，您可以访问this.on_submit()之类的mixin方法

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

Vue使用一种commit（）方法提供多种形式

2 个答案: