Passing data back to parent?

Hi,

I am trying to find a way for passing data from the child component back to the parent (props unfortunately work only from parent -> child)

Thanks!

7 Likes

You can use $emit method for this purpose.
v-on directive captures the child components events that is emitted by $emit

Child component triggers clicked event:

export default {
  methods: {
    onClickButton (event) {
      this.$emit('clicked', 'someValue')
    }
  }
}

Parent component receive clicked event:

<div>
  <child @clicked="onClickChild"></child>
</div>
export default {
  methods: {
    onClickChild (value) {
      console.log(value) // someValue
    }
  }
}
34 Likes

Cool, thanks! I have used the $emit before but I haven’t seen the args option in the docs. :stuck_out_tongue:

4 Likes

This example works similarly, in cases where there are more than one emit argument, correct?

Correct, yes

1 Like

Maybe this helps.

https://jsfiddle.net/tiagomatosweb/vqtnpyzw/

Don’t forget to open the dev tools to see the messages.

3 Likes

Thanks! This helped me to understand

Thanks ma <3

You can proxy all child events to parent with v-on="$listeners", see fiddle.

1 Like

how about passing multiple values???

this.$emit('clicked', 'someValue', 'someOtherValue');

you can also pass an object

this.$emit('clicked', {someValue, otherValue});

and handle it as

onClicked ({someValue, otherValue}) {
  console.log(someValue, otherValue);
}

or

onClicked (payload) {
  const {someValue, otherValue} = payload;
  console.log(someValue, otherValue);
}
6 Likes

Maybe the answer is already somewhere in the posts above but somehow I’m not able to translate it into my personal setting…

I have the event (submit) in my blade view template but need to get hold of the value of the prop “errors” from my child-component (I need it with the function “formValidationDe”):

<form class="register-form" @submit.prevent="formValidationDe" method="post" novalidate="true">
            <form-input
                    label="@lang('webstore.register_form.email')"
                    type="email"
                    name="email"
                    :errors="{{ json_encode($errorMessages) }}"
                    :formfield="customerEmail">
            </form-input>
</form>

Is that possible?

Thanks so much!

Hi Guys I have one doubt
How to pass input data value to next page in vue js
I try session but it is not a correct way
Plz help me this makes me a head ache to me

Please open a new topic for a new question.

Can i also pass more properties within the parent component?
For example i want to do this:

<div v-for="(element, index) in myArray">
  <child @clicked="onClickChild(index)"></child>
</div>

export default {
  methods: {
    onClickChild (value, index) {
      console.log(index) // index is correct
      console.log(value) // value is undefined
    }
  }
}

When i do so, i can not access the value anymore…

@Timmy,

you can pass arguments, and second value will be data from child component:

<div v-for="(element, index) in myArray">
  <child @clicked="onClickChild(index, ...arguments)"></child>
</div>
4 Likes

Thx :pray:t4:

I wrote an article about passing data back to parent component:
https://blog.carbonteq.com/vuejs-passing-data-back-to-parent-components/
I have used 3 very basic methods to change the state of data in vue app. i know your problem is solved but still hopping if this article can help anyone looking for solution of this problem or any problem related to passing data to parent component.

thanks, it’s help me lot too. :stuck_out_tongue: :stuck_out_tongue::stuck_out_tongue:

Thanks a lot