javascript - 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 作为单独文件中的模板以避免困惑，data 属性是该特定区域的表单数据的容器，该特定区域绑定(bind)到具有 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>