title: Understanding component props in VueJS
body: <p>I'm trying out vuejs by following along with the laracasts series of webcasts on this. In <a href="https://laracasts.com/series/learning-vue-step-by-step/episodes/8" rel="noreferrer">https://laracasts.com/series/learning-vue-step-by-step/episodes/8</a>, Jeffery Way discusses custom components. I have the following code based on his screencast:</p>
  
  <pre><code>    &lt;div id="app"&gt;
          &lt;tasks list="tasks"&gt;&lt;/tasks&gt;
      &lt;/div&gt;
  
      &lt;template id="tasks-template"&gt;
          &lt;ul&gt;
              &lt;li :class="{'completed' : task.c}" @click = "task.c = ! task.c"  v-for ="task in tasks"&gt;{{task.t}}&lt;/li&gt;
  
          &lt;/ul&gt;
  
      &lt;/template&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
      vue.component('tasks', {
      template: '#tasks-template',
  
      props:['list'] // why not props:['tasks'] ??
  
      });
  
      new Vue({
      el: '#app',
      data: {
          tasks: [
              {t: 'go to doctor', c: false},
              {t: 'go to work', c: false},
              {t: 'go to store', c: true}
          ]
  
      }
  </code></pre>
  
  <p>In this he discusses setting the props as follows:</p>
  
  <pre><code>    props:['list'] 
  </code></pre>
  
  <p>Why is it not </p>
  
  <pre><code>props:['tasks'] ?
  </code></pre>
  
  <p>In <a href="http://vuejs.org/guide/components.html#Props" rel="noreferrer">http://vuejs.org/guide/components.html#Props</a> it states:</p>
  
  <blockquote>
    <p>Every component instance has its own isolated scope. This means you cannot (and should not) directly reference parent data in a child component’s template. Data can be passed down to child components using props.A “prop” is a field on a component’s data that is expected to be passed down from its parent component. A child component needs to explicitly declare the props it expects to receive using the props option:</p>
  </blockquote>
  
  <p>How does the component know to associate the tasks array with list? Also in this case I assume child = component and parent = the vue instance?</p>