使用Vue js发布具有多个组件的表单的最佳方式是什么

当我开始我的Vue狂潮(最近才开始,但到目前为止我真的很喜欢学习这个框架)时,出现了几个问题。其中之一是如何从多个组件发布表单。所以在我继续前进之前,我想问你,你对这种结构的看法是什么,如果我错了,请给我指出正确的方向。

就这样。 我正在使用ASP.NET CORE 2.1和Vue JS模板(带webpack)进行SPA项目( https://github.com/MarkPieszak/aspnetcore-Vue-starter )我的项目是由几个容器构成的,如下所示: 在我的应用程序根目录中,我注册了几个容器

<template>

  <div id="app" class="container">

    <app-first-container></app-first-container>
    <app-second-container></app-second-container>
    <!--<app-third-container></app-third-container>-->
    <app-calculate-container></app-calculate-container>
    <app-result-container></app-result-container>

  </div>   
</template>

<script>
  // imported templates
  import firstContainer from './first-container'
  import secondContainer from './second-container'
  import calculateContainer from './calculateButton-container'
  //import thirdContainer from './third-container'
  import resultContainer from './result-container'

  export default {
    components: {
      'app-first-container': firstContainer,
      'app-second-container': secondContainer,
     // 'app-third-container': thirdContainer,
      'app-calculate-container': calculateContainer,
      'app-result-container': resultContainer
    }
  } 
</script>

在我的第一个容器中,我的脚本文件中有几个下拉列表和两个输入字段,在这里我从API获取数据,并用获取的数据填充下拉列表和输入字段。

类似的东西(输入一些虚拟代码进行演示)

<template>
  <div>
    <h1>Crops table</h1>

    <p>This component demonstrates fetching data from the server. {{dataMessage}}</p>

    <div class="form-row">

      <div class="form-group col-md-6">
        <label  for="exampleFormControlSelect1" class="col-form-label-sm font-weight-bold">1. Some text</label>
        <select class="form-control" id="exampleFormControlSelect1" v-model="pickedCropType" @change="getCropsByType()">
          <option v-for="(cropType, index) in cropTypes" :key="index" :value="cropType.id" :data-imagesrc="cropType.imgPath">{{ cropType.name }}</option>
        </select>
      </div>

      <div class="form-group col-md-6">
        <label for="exampleFormControlSelect2" class="col-form-label-sm font-weight-bold">2. Some text</label>
        <select class="form-control" id="exampleFormControlSelect2">
          <option v-for="(crop, index) in cropSelectList" :key="index" :value="crop.id">{{ crop.name }}</option>
        </select>
      </div>
    </div>

  </div>
</template>

<script>

  import { mapActions, mapState } from 'vuex'

  export default {
    data() {
      return {
        cropTypes: null,
        cropSelectList: null,
        crops: null,
        pickedCropType: null,

      }
    },

    methods: {
      loadPage: async function () {
        try {
          //Get crop types and create a new array with crop types with an added imgPath property
          var cropTypesFinal = [];
          let responseCropTypes = await this.$http.get(`http://localhost:8006/api/someData`);
          responseCropTypes.data.data.forEach(function (element) {

            cropTypesFinal.push(tmpType);
          });


        } catch (err) {
          window.alert(err)
          console.log(err)
        }
      },
      getCropsByType: async function () {
        //Get crops by crop type
        let responseCrops = await this.$http.get(`http://localhost:8006/api/crop/Type/${this.pickedCropType}`);
        var responseCropsData = responseCrops.data.data;
        this.cropSelectList = responseCropsData;
      }
    },

    async created() {
      this.loadPage()
    }
  }
</script>

在我的第二个容器中,我有不同的下拉列表和不同的输入字段以及不同的脚本等等。

所以,我的问题是:

1.) 我在第一个容器中有必需的数据表单字段,在第二个容器中有额外的数据,我的提交按钮在第三个容器(app result container)中分开。所以,如果不能的话,这是一种合理的、合乎逻辑的容器构造方法吗?

2.) 在处理/获取/提交特定容器的数据的每个容器中输入脚本标记是否明智?我是否应该将scripts标记放在单独的文件中,并保持结构干净,将html和js文件分开。

例子: 从“something”导入{something}

export default {
  data () {
    return {
      someData: 'Hello'
    }
  },
  methods: {
    consoleLogData: function (event) {
      Console.log(this.someData)
    }
  }
}

3.) 我是否可以将输入值从一个容器发送到另一个容器(在我的特定情况下,从第一个和第二个容器发送到app calculate container(第三个容器))?

如何使用计算的导入值提交返回结果容器