Vuejs - 如何從兩個組件提交數據

Question

我有 2 個表單組件，我想什么時候點擊保存，然后 form1 和 form2 的數據將在一個請求中提交到服務器。 謝謝！

我的代碼：

<template>
  <div>
    <form1></form1>
    <form2></form2>
    <button type="button" @click="saveData()">Save</button>
  </div>   
</template>
<script>
export default {
    methods: {
      saveData() {
       //post data form1 and form2 to server
      }
    }
  } 
</script>

Answer 1

未經測試，但像這樣的事情應該可以解決問題

form1 和 form2 作為單獨文件中的模板以避免混亂，數據屬性是該特定區域的表單數據的容器，該特定區域綁定到使用 v-model 指令的控件

<template>
  <div>
    <my-form1 :data="myFormData.form1Data"></my-form1>
    <my-form2 :data="myFormData.form2Data"></my-form2>
    <button type="button" @click="saveData()">Save</button>
  </div>   
</template>
<script>
import MyForm1 from 'MyForm1';
import MyForm2 from 'MyForm2';

export default {
    components: {
        MyForm1,
        MyForm2
    },
    data () {
        return {
            myFormData: {
                form1Data: {
                    prop: "my-prop-value":
                ,
                form2Data: {
                    prop: "my-other-prop-value":
                }               }
            },
        };
    },  
    methods: {
      saveData() {
        //send myFormData here
      }
    }
  } 
</script>

示例 form1 模板：

<template>
    <div>
        <textarea v-model="data.prop" placeholder="write something.."></textarea>
    </div>
</template>
<script>
export default {
    props: {
        data: Object
    }
}
</script>