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