相关疑难解决方法(0)

我很难理解如何在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, …