title: How to access data from deeply nested child components in Vue.js
body: <p>I am building an interface using Vue.js.  I have a form, this form contains an address, and other bits of miscellaneous data.  So I created two components in Vue, <code>UserData</code> and <code>UserAddress</code>.  <code>UserData</code> contains an instance of <code>UserAddress</code> as a child component.  I want to specialize the behaviour of the "Submit" button for the form depending on the page, so these components don't contain the submit button -- the outer component, representing the page (<code>UserPage</code>) contains the submit button, and just includes the <code>UserData</code> template.</p>
  
  <p>So the hierarchy goes, <code>UserPage</code> => <code>UserData</code> => <code>UserAddress</code>.</p>
  
  <p>Now I need to get ALL the form data within some method on <code>UserPage</code>.  I would just say that I need to get it within the submit handler, but the only way that I can think to do this without directly accessing the data of the child components is the following:</p>
  
  <ul>
  <li>Use <code>$broadcast</code> to propagate an event <code>e1</code> downwards from the submit handler</li>
  <li>Listen for the <code>e1</code> event in <code>UserAddress</code></li>
  <li>Use <code>$dispatch</code> to send an event <code>e2</code> and bundle the address data with the message</li>
  <li>Listen for <code>e2</code> in <code>UserData</code>, add the other form data to the message, and propagate or re-dispatch the event</li>
  <li>Listen for <code>e2</code> in <code>UserPage</code> and find the full aggregated data there.</li>
  </ul>
  
  <p>Is this a normal method for dealing with a situation like this?  It seems like overkill, but accessing child <code>$data</code> is explicitly non-recommended by the manual.</p>