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

我正在努力了解如何在vue.js中的组件之间传递数据。我已经通读了几次文档，并查看了许多与Vue相关的问题和教程，但我仍然不明白。

为了解决这个问题，我希望得到帮助，以完成一个非常简单的示例

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

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

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

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

更新

好的，我已经确定了第二步。这是显示进度的新小提琴：https : //jsfiddle.net/retrogradeMT/9pffnmjp/

因为我使用的是Vue路由器，所以我不使用道具将数据发送到新组件。相反，我需要在v链接上设置参数，然后使用过渡钩接受它。

V链接更改请参见vue-router文档中的命名路由：

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

然后在组件上，将数据添加到路由选项，请参阅过渡钩子：

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