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

Question

我很难理解如何在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-router,所以我不使用props将数据发送到新组件.相反,我需要在v-link上设置params,然后使用转换钩子来接受它.

V-link更改在vue-router docs中查看命名路由:

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

Answer 1

-------------以下仅适用于Vue 1 --------------

传递数据可以通过多种方式完成.该方法取决于使用类型.

如果要在添加新组件时从html传递数据.这是使用道具完成的.

<my-component prop-name="value"></my-component>

仅当您将prop名称添加prop-name到props属性时,此prop值才可用于组件.

由于某些动态或静态事件,数据从组件传递到另一个组件.这是通过使用事件调度员和广播公司完成的.例如,如果您有这样的组件结构:

<my-parent>
    <my-child-A></my-child-A>
    <my-child-B></my-child-B>
</my-parent>

并且您希望从中发送数据<my-child-A>,<my-child-B>然后<my-child-A>您必须发送一个事件:

this.$dispatch('event_name', data);

此活动将一直沿着母链传递.从您拥有分支的任何一个父母那里,<my-child-B>您可以将数据与数据一起广播.所以在父母:

events:{
    'event_name' : function(data){
        this.$broadcast('event_name', data);
    },

现在这个广播将沿着儿童链传播.无论你想抓住哪个孩子,在我们的案例中<my-child-B>我们都会添加另一个事件:

events: {
    'event_name' : function(data){
        // Your code. 
    },
},

传递数据的第三种方法是通过v-links中的参数.当组件链被完全销毁或URI发生变化时,使用此方法.我可以看到你已经理解了他们.

确定您想要的数据通信类型,并进行适当选择.

Answer 2

将数据从父组件发送到子组件的最佳方法是使用props.

将数据从父级传递给子级 props

• 在子节点中声明props(数组或对象)
• 通过它传递给孩子 <child :name="variableOnParent">

见下面的演示:

Vue.component('child-comp', {
  props: ['message'], // declare the props
  template: '<p>At child-comp, using props in the template: {{ message }}</p>',
  mounted: function () {
    console.log('The props are also available in JS:', this.message);
  }
})

new Vue({
  el: '#app',
  data: {
    variableAtParent: 'DATA FROM PARENT!'
  }
})

<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>

<div id="app">
  <p>At Parent: {{ variableAtParent }}</p>
  <child-comp :message="variableAtParent"></child-comp>
</div>

Answer 3

我认为这个问题在这里:

<template id="newtemp" :name ="{{user.name}}">

当您使用前缀时,:您向Vue指示它是变量,而不是字符串.所以你不需要{{}}周围user.name.尝试:

<template id="newtemp" :name ="user.name">

编辑 - - -

以上是正确的,但更大的问题是,当您更改URL并转到新路由时,原始组件将消失.为了让第二个组件编辑父数据,第二个组件需要是第一个组件的子组件,或者只是同一组件的一部分.