Passing data from one component to another

Question

On component1.vue I have

  export default {
    data () {
      return {
        editItemNumber: null,
        editBreakdownNumber: null
      }
    }

On component2.vue I have a table populated by an array

On that table is an edit button. Among the item in that table is itemNumber value. Which I need to assign from that particular row clicked to the editItemNumber on component1.vue

<b-table show-empty bordered striped hover :items="itemTableList" :fields="fields">
  <template slot="actions" scope="row">
<b-btn variant='success' size="sm" @click.stop="edit(row.item,row.index,$event.target)">Edit</b-btn>
</template>
</b-table>

As you see above originally all of this was on one component and I was just calling to an edit function which repopulated the v-models with that rows contents. But now with everything split among components I don't know how to edit this to do what I've been tasked with.

I've never used JavaScript, vue or much of anything beyond basic HTML. I'm a .NET dev who's been tasked with helping out on some web based work and I'm floundering. So any help is appreciated.

I don't get the question entirely. Can you share more code of your components? — samayo
component1.vue is parent for component2.vue ? Need more description, or better more code. — hedin
Also, you can quick look to $emit-method and this article: Using with Custom Events. In a nutshell, the child needs to emit the event, and the parent to subscribe it. When you will emit event, you can pass argument as payload. You will get this payload in subscription place in parent. — hedin
You can prepare minimalistic jsfiddle so it will be more understandable, and easier to help you. — hedin

akatakritos akatakritos · Accepted Answer · 2017-11-14T16:10:24

The preferred way to move data between components is with events.

Normally you use props to pass data from a parent component to a child, and events to pass from a child up to a parent.

So the editmethod of C2 can be something like

edit(item, index, target) {
    const payload = {
        item,
        index,
        target
    };

    this.$emit('edit', payload);
}

Then you just have to listen to that event in C1. Notice the @edit attribute: that means when the edit event is fired from component-one, run my "edit" method.

<template>
<div>
   <p>{{ editItemNumber }}</p>
  <component-two @edit="edit" />
</div>

<script>
export default {
data () {
  return {
    editItemNumber: null,
    editBreakdownNumber: null
  };
},

methods: {
    edit(eventPayload) {
        this.editItemNumber = eventPayload.item.editItemNumber
    }
}
</script>

If you both C1 and C2 are children of the same parent P the idea is the same, except C1 can't listen directly to C2. Instead P will listen to the edit event and pass the needed changes down to C1 through its props.

The docs on components are really good, pay special attention to the sections on props and custom events. https://vuejs.org/v2/guide/components.html

Passing data from one component to another

1 Answers