Passing method from parent component to child component in vuejs

Question

I would like to pass this method of the parent component to the child component, let me explain: when I click the confirm button on my modal (child component) it must send the data of the parent form (parent component)

the method of parent component:

 <b-form @submit.prevent="onSubmit">
.......
 </b-form>

async onSubmit() {
      this.errors = false;
      await this.$store.commit('commit_contractable_id', this.id)
      await this.$store.dispatch('create_contract', this.form)
    },

my modal of child component button:

<button type="submit" class="btn btn-lg btn-outline-primary w-50" data-dismiss="modal">
        Confirm
</button>

i want when i click confirm executes the function that is in the parent component

Emit the event in the child component and listen to it in the parent and then you can trigger parent onSubmit. Here is vue docs. In your child component you can use v-on:click="$emit('modal-submit')" and in the parent component v-on:modal-submit="onSubmit". You can also pass form data with $emit and then get that data in the parent. Check the docs example — ljubadr
– ljubadr, Commented Jan 14, 2022 at 17:11

tony19 · Accepted Answer · 2022-07-15 23:21:33Z

2

Use Emit (per @ljubadr's comment).

In english:

Child Component: 'Hey Parent! This thing happen!'

Parent Component: 'Oh really?! Then I'll do this thing then!'

In Code:

Child Component:

methods: {
  doSomething() {
    this.$emit('foobar'); // You can also send up a value(object)
  }

Parent Component:

<template>
  <child-component @foobar="doThisThing" />
</template>

<script>
...

methods: {
  doThisThing() {....
...
</script>

edited Jul 15, 2022 at 23:21

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 14, 2022 at 17:37

Riza Khan

3,2385 gold badges30 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing method from parent component to child component in vuejs

1 Answer 1

In english:

In Code:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

In english:

In Code:

Comments

Your Answer

Sign up or log in

Post as a guest

Related