将数据从一个组件传递到另一个组件

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.

Answer 1

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 edit method 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://v2.vuejs.org/v2/guide/components.html