Question

有人可以帮助我将功能从子组件传递到父组件吗？我在父组件中调用模式。在组件内部，有两个按钮取消和提交。我想在单击提交或取消按钮后关闭子组件。我试图通过在数据中声明“显示”来关闭模式，这使样式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://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events

将方法从子组件传递到Vue.js中的父组件

1 个答案: