title: Multiple child values in parent
body: <p>I currently have a parent component that has 2 children.</p>
  
  <p>Both the children are simple <code>&lt;input&gt;</code> fields</p>
  
  <p>In my parent, I have a button (this a form afterall), when click, I'd like to get the values of both children in my parent, so I can send it to an API endpoint.</p>
  
  <p>Whats the easiest way?</p>
  
  <p>I've seen <code>props</code> and <code>$emit</code> but not sure which is the best approach</p>
  
  <p>Thanks</p>
  
  <p>EDIT:</p>
  
  <p>My parent looks like following:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;name-filter&gt;&lt;/name-filter&gt;
      &lt;report-type-filter&gt;&lt;/report-type-filter&gt;
      &lt;button @click="sumbmitForm()"&gt;Submit&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    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 &lt;input&gt; values here
          }
      }
    }
  &lt;/script&gt;
  </code></pre>