Question

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

两个孩子都是简单的<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>

Answer 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

父级中有多个子级值

1 个答案: