Vue가 하나의 submit() 메서드를 사용하는 여러 형식

Vue가 하나의 submit() 메서드를 사용하는 여러 형식

몇 가지 양식이 있어요.모두 같은 로직(검증, 송신...)이기 때문에 폼의 액션을 제어하는 방법을 1개 만들고 싶습니다.현재 제 코드는 용장성입니다. 왜냐하면 저는 같은 방법을 가지고 있기 때문입니다.onSubmit()모든 .vue 파일에 저장됩니다.

내 HTML:

<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()코드 위치는 어디입니까? (우량한 프랙티스)

다음 논리가 포함된 개별 파일을 만듭니다.

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

몇 가지 옵션이 있습니다.내가 가장 좋아하는 것은 mixin vue docs mixin을 만드는 것이다.

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

최종적으로는 작성한 믹스인(메서드, 데이터 등)이 그 믹스인을 사용하는 컴포넌트에 Marge 됩니다.

즉, 실제로 다음과 같은 믹스인 방법에 액세스할 수 있습니다.this.on_submit()

Vue3(Quasar를 사용하면 모든 프레임워크에서 사용할 수 있습니다):

여러 개의 양식을 포함하는 부모가 있다고 가정해 보십시오.<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 }
}

다음으로 Import 합니다.<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>

부모에서 체크 기능을 실행할 때는 각 폼을 참조하여 문제가 없는지 확인해야 합니다.

언급URL : https://stackoverflow.com/questions/52887704/multiple-forms-with-one-submit-method-by-vue