将数据传递到vue.js中的组件 [英] Passing data to components in vue.js

问题描述

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

I'm struggling to understand how to pass data between components in vue.js. I have read through the docs several times and looked at many vue related questions and tutorials, but I'm still not getting it.

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

To wrap my head around this, I am hoping for help completing a pretty simple example

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

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

Here is a fiddle, which fails on step two: https://jsfiddle.net/retrogradeMT/d1a8hps0/

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

I understand that I need to use props to pass data to the new component, but I'm not sure how to functionally do it. How do I bind the data to the new component?

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/

Ok, I've got the second step figured out. Here is a new fiddle showing the progress: https://jsfiddle.net/retrogradeMT/9pffnmjp/

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

Because I'm using Vue-router, I don't use props to send the data to a new component. Instead, I need set params on the v-link and then use a transition hook to accept it.

V链接更改查看vue-router文档中的命名路由:

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

然后在组件上，将数据添加到路由选项查看过渡钩子:

Then on the component, add data to the route options 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,
        }
   },
})

推荐答案

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

-------------Following is applicable only to Vue 1 --------------

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

Passing data can be done in multiple ways. The method depends on the type of use.

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

If you want to pass data from your html while you add a new component. That is done using props.

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

仅当在属性props中添加属性名称prop-name时，该属性值才对组件可用.

This prop value will be available to your component only if you add the prop name prop-name to your props attribute.

由于某些动态或静态事件将数据从一个组件传递到另一个组件时.这是通过使用事件分发程序和广播程序完成的.因此，例如，如果您具有这样的组件结构:

When data is passed from a component to another component because of some dynamic or static event. That is done by using event dispatchers and broadcasters. So for example if you have a component structure like this:

<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>中，您将必须调度一个事件:

And you want to send data from <my-child-A> to <my-child-B> then in <my-child-A> you will have to dispatch an event:

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

此事件将一直沿父链进行.从哪个父级到<my-child-B>分支，您都将事件与数据一起广播.所以在父母中:

This event will travel all the way up the parent chain. And from whichever parent you have a branch toward <my-child-B> you broadcast the event along with the data. So in the parent:

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

现在，此广播将沿着子链传播.无论您想抓取该事件的哪个孩子，在我们的案例<my-child-B>中，我们都会添加另一个事件:

Now this broadcast will travel down the child chain. And at whichever child you want to grab the event, in our case <my-child-B> we will add another event:

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

---

传递数据的第三种方法是通过v链接中的参数.当组件链被完全销毁或URI发生更改时，将使用此方法.而且我可以看到您已经了解它们.

---

The third way to pass data is through parameters in v-links. This method is used when components chains are completely destroyed or in cases when the URI changes. And i can see you already understand them.

决定什么类型你想要的数据通信，并选择适当的.

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

这篇关于将数据传递到vue.js中的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！