父级中的多个子值答案

【问题标题】：Multiple child values in parent父级中的多个子值
【发布时间】：2018-12-05 10:48:33
【问题描述】：

我目前有一个有 2 个子组件的父组件。

两个孩子都是简单的<input>字段

在我的父级中，我有一个按钮（毕竟这是一个表单），单击时，我想获取父级中两个子级的值，以便将其发送到 API 端点。

最简单的方法是什么？

我见过props 和$emit，但不确定哪个是最好的方法

谢谢

编辑：

我的父母如下所示：

<template>
  <div>
    <name-filter></name-filter>
    <report-type-filter></report-type-filter>
    <button @click="sumbmitForm()">Submit</button>
  </div>
</template>

<script>
  import NameFilter from './filters/NameFilter.vue';
  import ReportTypeFilter from './filters/ReportTypeFilter.vue';

  export default{
    components: {
        NameFilter,
        ReportTypeFilter
    },
    data() {
        return {
            name: "",
            type: ""
        };
    },

    methods: {
        sumbmitForm() {
            // I'd like to get the <input> values here
        }
    }
  }
</script>

【问题讨论】：

Modify props.value from within child component的可能重复

标签： vue.js vuejs2

【解决方案1】：

我不知道你到底想要什么，所以我假设你的代码如下所示：

<form>
     <input>
     <input>
     <button>
</form>

如果是这种情况，那么您可以在两个输入上使用 v-model 来获取它们的值，如下所示：

<form>
    <input v-model="input1">
    <input v-model="input2">
    <button>
</form>

然后，在数据中定义这两个变量：

data() {
     return {
          input1: '',
          input2: '',
     }
}

这将使您能够像这样获取它们的值：this.input1 和 this.input2

【讨论】：