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

Question

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

就到这里了。我正在使用 ASP.NET CORE 2.1 和 Vue JS 模板（使用 webpack）（https://github.com/MarkPieszak/aspnetcore-Vue-starter）开发一个 SPA 项目，我的项目由多个容器构成，例如这个：在我的 app-root 中，我注册了几个容器

<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.)在我正在处理/获取/提交该特定容器的一些数据的每个容器中输入脚本标签是否明智？我应该将脚本标签放在单独的文件中并保持结构干净，将 html 与 js 文件分开。

示例：从“某事”导入{某事}

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

3.)我可以将输入值从一个容器发送到另一个容器（在我的特殊情况下，从第一个和第二个容器到 app-calculate-container（第三个容器））？

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

Answer 1

如果您希望组件相互通信或共享数据，您需要将emit事件从一个组件向上传递到父组件并通过 props 向下传递，或者使用某种状态管理模型，例如 Vuex，其中每个组件组件可以监听 store。

看看这个代码沙箱：https : //codesandbox.io/s/8144oy7xy2

应用程序

<template>
  <div id="app">
    <child-input @input="updateName" />
    <child-output :value="name" />
  </div>
</template>

<script>
import ChildInput from "@/components/ChildInput.vue";
import ChildOutput from "@/components/ChildOutput.vue";

export default {
  name: "App",
  components: {
    ChildInput,
    ChildOutput
  },
  data() {
    return {
      name: ""
    };
  },
  methods: {
    updateName(e) {
      this.name = e.target.value;
    }
  }
};
</script>

子输入.vue

<template>
  <input type="text" @input="changeHandler">
</template>

<script>
export default {
  name: "ChildInput",
  methods: {
    changeHandler(e) {
      this.$emit("input", e);
    }
  }
};
</script>

子输出.vue

<template>
  <p>{{ value }}</p>
</template>

<script>
export default {
  name: "ChildOutput",
  props: {
    value: {
      type: String,
      default: ""
    }
  }
};
</script>

这是怎么回事？

该ChildInput组件是一个文本字段，在它内部的每次更改时，都会触发一个事件（发出 usingthis.$emit()并将整个事件向上传递）。

当这个触发时，App正在监听更改，它触发一个更新名称数据属性的方法。

因为它name是一个响应式数据属性，并且作为道具传递给ChildOutput组件，所以屏幕会重新渲染并使用写入的文本进行更新。

彼此既不知道ChildInput也不ChildOutput知道。父节点监听传递给它的事件，然后将新的 prop 向下传递。

这种工作方式很好且易于理解，但我强烈建议您查看 Vuex，因为当您处理琐碎的任务时，这种方法会变得混乱和复杂。