Vue Pass Data From Child to Parent Components

README.md

Vue $emit Child to Parent Instructions

This gist looks at the code needed to pass data from a child component to the parent component. It goes one step further and shows how to render the data in another child component.

Important syntax

• $emit is used to send a custom event from the child to the parent component
• v-on:submit.prevent is attached to the form in the child component. Using .prevent stops the browser from reloading when the form is submitted (default behaviour)
• methods in both the child and parent component are used to handle sending and receiving form data
• props is used to pass data from the parent to child. In this example, props are being sent to both of the child components.
• v-for Is used to loop through the array entries

---

Parent Component

Used to organize and send information to the child components

template

In the template, add the two child components.

• Form Component
  • use v-on to connect the output of the child component function to the parent component function
  • use v-bind to send the form fields object from the parent component to the child component

<FormComponent v-on:formSubmitted="handleFormData" v-bind:dataGroup="formData" />

• Output Component
  • use v-bind to send the entries from the array in the parent to the output component to display it.

<OutputComponent :outputEntries="formEntries">

• Naming conventions are very important for clarity.

data

• Create an object to send to the form component's props

formData: {
  title: "",
  description: ""
}

• Also create an empty array that will be used to take information from form.
  • It will also be used to pass information to the other child component

formEntries: []

methods

• This method is used to push each form entry to the empty array

methods: {
  handleFormData(dataFromChild) {
    this.formEntries.push(dataFromChild)
  }
}

---

Form Component

This component is used to take information from the user

template

• When putting a form into it's own component, you need to put a v-on:submit.prevent="methodName" into the opening form tag.
• See the .FormComponent.vue file for the an example

methods

• In methods, you will create a function that will send the form submission content to the parent component
• Refer to this example:

methods: {
  onSubmit() {
    this.$emit("formSubmitted", {
      propName: this.objectName.varName,
      propName: this.objectName.varName
    })
  }
}

• This syntax is used to assign the values from the form input fields to object properties.
  • replace propName with the property title (ie: description)
  • replace objectName with the prop name
  • replace varName with

Data and Props

In this example, the parent component is used to direct the flow of information.

• add props for variables that will be passed from the parent component. Declare their type

props: {
  dataGroup: {
    type: Object
  }
}

---

Output Component

This component is used to display all the information from the forms submitted.

Template

Add a v-for loop on one of the elements and create the layout for each entry.

<ul>
  <li v-for="entry in outputEntries" :key="entry.id">
    <h3>{{ entry.title }}</h3>
    <p>{{ entry.description }}</p>
  </li>
</ul>

Props

Add a prop to accept the array from the parent component

props: {
  outputEntries: {
    type: Array
  }
}

FormComponent.vue

<template>
  <form v-on:submit.prevent="onSubmit">
    <fieldset>
      <legend><h2>Add a new Task</h2></legend>
      <!-- title input -->
      <label for="title">Title</label>
      <input type="text" name="title" v-model="dataGroup.title" />
      <!-- description input -->
      <label for="description">Description</label>
      <input type="text" name="description" v-model="dataGroup.description" />
      <button>Add Item</button>
    </fieldset>
  </form>
</template>
<script>
export default {
  props: {
    dataGroup: {
      type: Object,
    },
  },
  methods: {
    onSubmit() {
      this.$emit("formSubmitted", {
        title: this.formGroup.title,
        description: this.formGroup.description,
      });
    },
  },
};
</script>

OutputComponent.vue

<template>
  <article>
    <h2>Form Entry List</h2>
    <div>
      <ul>
        <li
          v-for="entry in outputEntries"
          :key="entry.id"
        >
          <h3>{{ entry.title }}</h3>
          <p>{{ entry.description }}</p>
        </li>
      </ul>
    </div>
  </article>
</template>
<script>
export default {
  props: {
    outputEntries: {
      type: Array,
    },
  },
};
</script>

ParentComponent.vue

<template>
  <div class="container mx-auto">
    <!-- Form Component --> 
    <FormComponent v-on:formSubmitted="handleFormData" v-bind:dataGroup="formData" />
    <!-- Output Component -->
    <TaskList :outputEnties="formEntries" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        title: "",
        description: "",
      },
      formEntries: [],
    };
  },
  methods: {
    handleFormData(dataFromChild) {
      this.formEntries.push(dataFromChild);
    },
  },
};
</script>