在 vuejs 中将方法从子组件传递给父组件

Question

Can someone help me with passing a function from the child component to the parent component? I am calling a modal in parent component. Inside component there are two buttons cancel and submit. I want to close the child component after clicking on the submit or cancel buttons. I tried to close the modal by declaring "show" in data, It makes the style display=None and makes the modal disappear but I am not able to scroll the screen after that.

Parent component

<div>
  <modal-dialog v-if="show" id="showCommentEffortBox">
     <input type="button" value="Cancel" @click="show=false">
     <input type="button" value="Submit" @click="show=false">
  </modal-dialog>

data() {
     return {
        show: true
       }
    }

Child component

<template>
    <transition name="modal">
        <div class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog" style="max-width: 95%">
                <div class="modal-content"  style="max-height: 90vh;">
                    <header class="modal-header">
                        <slot name="header">
                        </slot>
                    </header>
                    <section class="modal-body" style="overflow-y: auto">
                        <slot name="body">
                        </slot>
                    </section>
                </div>
            </div>
        </div>
    </transition>
    </template>

    <script>
    export default {
    *****
    }
    </script>

Thanks in Advance

Answer 1

Have a look at these docs, this is the basic standard behaviour.

https://v2.vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events

Answer 2

You can pass methods as you pass data through slots.

Child component

<header class="modal-header">
  <slot name="header" :methodName="methodName">
  </slot>
</header>
<section class="modal-body" style="overflow-y: auto">
  <slot name="body" :methodName="methodName">
  </slot>
</section>

Parent Component

<template #header="props">
{{ props.methodName() }}
</template>