将数据传递给 vue.js 中的组件

我很难理解如何在vue中的组件之间传递数据.js.我已经多次阅读了这些文档，并查看了许多与vue相关的问题和教程，但我仍然不明白.

我希望大家能帮我完成一个简单的例子

1. 在一个组件中显示用户列表(完成)
2. 单击链接时将用户数据发送到新组件(完成)-请参阅底部的更新.
3. 编辑用户数据并将其发送回原始组件(目前为止尚未完成)

这是一把小提琴，它在第二步失败:https://jsfiddle.net/retrogradeMT/d1a8hps0/

我知道我需要使用props 将数据传递给新组件，但我不确定如何在功能上做到这一点.如何将数据绑定到新组件？

HTML:

    <div id="page-content">
       <router-view></router-view>
     </div>

 <template id="userBlock" >
   <ul>
     <li v-for="user in users">{{user.name}} - <a v-link="{ path: '/new' }"> Show new component</a>
     </li>
   </ul>
 </template>

  <template id="newtemp" :name ="{{user.name}}">
    <form>
      <label>Name: </label><input v-model="name">
      <input type="submit" value="Submit">
    </form>
  </template>

主要组件的js:

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);
     }
    }
  })

第二个组件的JS:

Vue.component('newtemp', {
  template: '#newtemp',
  props: 'name',
  data: function() {
    return {
        name: name,
        }
   },
})

UPDATE

好的，我已经想出了第二步.这是一把新小提琴，显示了进步:https://jsfiddle.net/retrogradeMT/9pffnmjp/

因为我使用的是Vue路由，所以我不使用props 将数据发送到新组件.相反，我需要在v-link上设置参数，然后使用一个转换钩子来接受它.

V-link更改see named routes in vue-router docs:

<a v-link="{ name: 'new', params: { name: user.name }}"> Show new component</a>

然后在组件上，将数据添加到路由选项see transition hooks:

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,
        }
   },
})