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

Question

我正在努力理解如何在 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-router，所以我不使用 props 将数据发送到新组件。相反，我需要在 v-link 上设置参数，然后使用转换挂钩来接受它。

V-link 更改 参见 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,
        }
   },
})

原文由 retrograde 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

---

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

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

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

---

由于某些动态或静态事件，数据从一个组件传递到另一个组件时。这是通过使用事件分派器和广播器来完成的。因此，例如，如果您有这样的组件结构：

 <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 发生变化时使用此方法。我可以看到你已经理解它们了。

---

Decide what type of data communication you want, and choose appropriately.

原文由 notANerdDev 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 }}<br>And is reactive (edit it) <input v-model="variableAtParent"></p>
  <child-comp :message="variableAtParent"></child-comp>
</div>

原文由 acdcjunior 发布，翻译遵循 CC BY-SA 4.0 许可协议