title: Passing data to components in vue.js
body: <p>I'm struggling to understand how to pass data between components in vue.js.   I have read through the docs several times and looked at many vue related questions and tutorials, but I'm still not getting it. </p>
  
  <p>To wrap my head around this, I am hoping for help completing a pretty simple example </p>
  
  <ol>
  <li>display a list of users in one component (done)</li>
  <li>send the user data to a new component when a link is clicked (done) - see update at bottom.</li>
  <li>edit user data and send it back to original component (haven't gotten this far)</li>
  </ol>
  
  <p>Here is a fiddle, which fails on step two: <a href="https://jsfiddle.net/retrogradeMT/d1a8hps0/">https://jsfiddle.net/retrogradeMT/d1a8hps0/</a></p>
  
  <p>I understand that I need to use props to pass data to the new component, but I'm not sure how to functionally do it. How do I bind the data to the new component?</p>
  
  <p>HTML: </p>
  
  <pre><code>    &lt;div id="page-content"&gt;
         &lt;router-view&gt;&lt;/router-view&gt;
       &lt;/div&gt;
  
   &lt;template id="userBlock" &gt;
     &lt;ul&gt;
       &lt;li v-for="user in users"&gt;{{user.name}} - &lt;a v-link="{ path: '/new' }"&gt; Show new component&lt;/a&gt;
       &lt;/li&gt;
     &lt;/ul&gt;
   &lt;/template&gt;
  
    &lt;template id="newtemp" :name ="{{user.name}}"&gt;
      &lt;form&gt;
        &lt;label&gt;Name: &lt;/label&gt;&lt;input v-model="name"&gt;
        &lt;input type="submit" value="Submit"&gt;
      &lt;/form&gt;
    &lt;/template&gt;
  </code></pre>
  
  <p>js for main component:</p>
  
  <pre><code>Vue.component('app-page', {
    template: '#userBlock',
  
    data: function() {
      return{
  
          users: []
        }
      },
  
  ready: function () {
      this.fetchUsers();
  },
  
  methods: {
      fetchUsers: function(){
          var users = [
            {
              id: 1,
              name: 'tom'
            },
            {
              id: 2,
              name: 'brian'
            },
            {
              id: 3,
              name: 'sam'
            },
          ];
  
          this.$set('users', users);
       }
      }
    })
  </code></pre>
  
  <p>JS for second component: </p>
  
  <pre><code>Vue.component('newtemp', {
    template: '#newtemp',
    props: 'name',
    data: function() {
      return {
          name: name,
          }
     },
  })
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Ok, I've got the second step figured out. Here is a new fiddle showing the progress: <a href="https://jsfiddle.net/retrogradeMT/9pffnmjp/">https://jsfiddle.net/retrogradeMT/9pffnmjp/</a></p>
  
  <p>Because I'm using Vue-router, I don't use props to send the data to a new component.  Instead, I need set params on the v-link and then use a transition hook to accept it. </p>
  
  <p>V-link changes <a href="http://vuejs.github.io/vue-router/en/named.html">see named routes in vue-router docs</a>:  </p>
  
  <pre><code>&lt;a v-link="{ name: 'new', params: { name: user.name }}"&gt; Show new component&lt;/a&gt;
  </code></pre>
  
  <p>Then on the component, add data to the route options <a href="http://vuejs.github.io/vue-router/en/pipeline/data.html">see transition hooks</a>: </p>
  
  <pre><code>Vue.component('newtemp', {
    template: '#newtemp',
    route: {
     data: function(transition) {
          transition.next({
              // saving the id which is passed in url
              name: transition.to.params.name
          });
       }
    },
   data: function() {
      return {
          name:name,
          }
     },
  })
  </code></pre>