title: VUE / VUEX: How To Pass Data From Parent Template To Child Template
body: <p>Using <strong>VUE 2.0</strong> and <strong>VUEX</strong> I am a bit confused about how to pass data from <code>parent</code> to <code>child</code>.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app" class="container"&gt;
      &lt;div class="card" v-for="(triad, index) in triads"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-sm-4"&gt;
            &lt;people /&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-4"&gt;
            &lt;places /&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-4"&gt;
            &lt;equipment /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>I am <em>looping</em> through an array named "triads":</p>
  
  <pre><code>state: {
    triads: [
      {
        people: [],
        places: [],
        equipment: []
      }
    ]
  }
  </code></pre>
  
  <p>I want to send the <code>triad</code> variable to <code>&lt;people /&gt;</code>, <code>&lt;places /&gt;</code> and <code>&lt;equipment /&gt;</code>.</p>
  
  <hr>
  
  <p>How do I get the content from the <strong>parent template</strong> to the <strong>child template</strong>? Thank you.</p>