Passing method from parent component to child component in vuejs
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
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>