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

Answer 1

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>