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

Question

有人可以帮我将 function 从子组件传递到父组件吗？ 我在父组件中调用模态。 组件内部有两个按钮取消和提交。 单击提交或取消按钮后，我想关闭子组件。 我试图通过在数据中声明“显示”来关闭模式，它使样式 display=None 并使模式消失，但之后我无法滚动屏幕。

父组件

<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
       }
    }

子组件

<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>

提前致谢

Answer 1

看看这些文档，这是基本的标准行为。

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

Answer 2

您可以在通过槽传递数据时传递方法。

子组件

<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>

父组件

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