[Vuejs]-How to send data to parent method from components?

by

0👍

✅

You don’t need to use the this keyword in your template.

<button
  type="button"
  class="btn btn-warning"
  v-on:click="$parent.deleteClicked(name)"
  style="margin: 3px;">
  {{ name }}
</button >

Also, I recommand to use custom events to achieve what you want to do.

<!-- Children component -->
<button
  type="button"
  class="btn btn-warning"
  v-on:click="$emit('delete', name)"
  style="margin: 3px;">
  {{ name }}
</button >

<!-- Parent component -->
<sablonx
  v-for="name in names"
  :key="name"
  :name="name"
  @delete="deleteClicked"/>

You can see no params is passed visually to the function deleteClicked, but what actually happens is that it listens to the delete event, and will apply the data passed from the event to the function. Another way of writing it would be:

<!-- Parent component -->
<sablonx
  v-for="name in names"
  :key="name"
  :name="name"
  @delete="deleteClicked($event)"/>

where $event is the variable containing the name you want to delete.

0👍

If you want to transfer data from a child component to a parent, you’d want to use $emit (Unlike when passing data from parent to child – then you’d wanna use props, or if you pass data from one component to another, you can use an Event Bus, which is not always recommended but that’s another subject)

Anyways, the code is:

this.$emit('youremitname', payload);

You want to have this code whenever you want to emit the data, for example if you want to emit the data after a click of a button, you’d want to have this inside a function. (If you’re using it it in the @click attribute, no need for the "this" keyword, simply write:

$emit('youremitname', payload)

This will transfer the data to the parent, however make sure you listen for it where you use your component, for example if your component name inside the parent componenet is ‘Customers’, then your code should look like this:

<Customers @youremitname></Customers>

You can also listen for an emit in the "mounted" or "created" lifecycle hook using:

$emit.$on('youremitname', passAFunctionHere).

For more information check out Vue docs – Custom Events.

Leave a comment