Несколько дочерних значений в родительском

Question

У меня в настоящее время есть родительский компонент, у которого есть 2 дочерних элемента.

Оба ребенка простые <input> поля

В моем родителе у меня есть кнопка (после этого форма), когда я нажимаю, я хочу получить значения обоих потомков в моем родителе, чтобы я мог отправить ее на конечную точку API.

Какой самый простой способ?

Я видел props и $emit, но не уверен, какой подход лучше

Спасибо

EDIT:

Мой родитель выглядит следующим образом:

<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-модель на обоих входах, чтобы получить их значения следующим образом:

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

Затем определите эти две переменные внутри ваших данных:

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

Это даст вам возможность получить их значения следующим образом: this.input1 и this.input2