title: How do I use data from Vue.js child component within parent component?
body: <p>I have a form component where I use a child component. I want to use data from the child component within the parent.</p>
  
  <p>My component in html:</p>
  
  <pre><code>&lt;candidates-form endpoint='/candidates/create' buttontext='Add Candidate'&gt;&lt;/candidates-form&gt;
  </code></pre>
  
  <p>Then here is the Vue instance:</p>
  
  <p><strong>CandidatesForm.vue</strong></p>
  
  <pre><code>&lt;template&gt;
  &lt;div class='row'&gt;
  
      &lt;div class='form-group'&gt;
          &lt;label&gt;Name:&lt;/label&gt;
          &lt;input type='text' class='form-control' v-model='name'&gt;
      &lt;/div&gt;
      &lt;div class='form-group'&gt;
          &lt;location-input&gt;&lt;/location-input&gt;
      &lt;/div&gt;
  
      &lt;button class='btn btn-primary'&gt;{{buttontext}}&lt;/button&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default {
          data() {
              return {}
          },
  
          props: ['endpoint', 'buttontext'],
  
          ready() {}
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I utilize the locationInput component in there and it renders to the screen nicely. That component implements Google Maps typeahead functionality for the input field and looks like this:</p>
  
  <p><strong>LocationInput.vue</strong></p>
  
  <pre><code>&lt;template&gt;
  
      &lt;place-input
              :place.sync="placeInput.place"
              :types.sync="placeInput.types"
              :component-restrictions.sync="placeInput.restrictions"
              class='form-control'
              label='Location: '
              name='location'
      &gt;&lt;/place-input&gt;
  
      &lt;pre&gt;{{ placeInput.place | json }}&lt;/pre&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
      import { PlaceInput, Map } from 'vue-google-maps'
  
      export default {
  
          data() {
              return {
                  placeInput: {
                      place: {
                          name: ''
                      },
                      types: [],
                      restrictions: {'country': 'usa'}
                  }
              }
          },
          props: ['location'],
  
          components: {
              PlaceInput
          },
          ready() {
          }
      }
  &lt;/script&gt;
  &lt;style&gt;
      label { display: block; }
  &lt;/style&gt;
  </code></pre>
  
  <p>I want to submit the <code>name</code> value and information from <code>placeInput.place</code> to the server. </p>
  
  <p>I register both components in my main app file like so:</p>
  
  <pre><code>Vue.component('locationInput', require('./components/LocationInput.vue'));
  Vue.component('candidatesForm', require('./components/CandidatesForm.vue'));
  
  const app = new Vue({
      el: 'body'
  });
  </code></pre>
  
  <p>How do I pass the <code>placeInput.place</code> data from location-input component to candidates-form component? </p>
  
  <p>I want to send the placeInput.place and name data from the candidates-form component to the server, most likely using vue-resource.</p>