Vue.js模态组件示例未关闭

Question

我正在尝试在我的项目中使用来自Vue.js网站示例的Modal Component Example。当我在my-project组件中使用模态组件时，它工作正常，但当我在header插槽中添加一个关闭按钮时，此按钮不起作用，它不会关闭模式，而footer中的默认按钮仍然工作良好。

模态组件：

<template>
    <transition name="modal">
        <div class="modal-mask">
        <div class="modal-wrapper">
            <div class="modal-container">

            <div class="modal-header">
                <slot name="header">
                default header
                </slot>
            </div>

            <div class="modal-body">
                <slot name="body">
                default body
                </slot>
            </div>

            <div class="modal-footer">
                <slot name="footer">
                default footer
                <button class="modal-default-button" @click="$emit('close')">
                    OK
                </button>
                </slot>
            </div>
            </div>
        </div>
        </div>
    </transition>
</template>

<script>
export default {
    props: {
        showMal: Boolean
    }
}
</script>

<style scoped>
    <!-- same as vuejs website modal component example -->
</style>

我怎么称呼它：

<template>
    <button id="show-modal" @click="showModal = true">Show Modal</button>
    <!-- use the modal component, pass in the prop -->
    <modal v-if="showModal" @close="showModal = false">
        <!--
        you can use custom content here to overwrite
        default content
        -->
        <div slot="header">
            <button class="modal-default-button" @click="$emit('close')">Close</button>
        </div>
    </modal>
</template>

<script>
export default {
    data () {
        return {
            showModal: false
        }
    }
</script>

我执行此代码有什么问题？

Answer 1

由于这是在父母：

<template>
    <button id="show-modal" @click="showModal = true">Show Modal</button>
    <!-- use the modal component, pass in the prop -->
    <modal v-if="showModal" @close="showModal = false">
        <!--
        you can use custom content here to overwrite
        default content
        -->
        <div slot="header">
            <button class="modal-default-button" @click="$emit('close')">Close</button>
        </div>
    </modal>
</template>

这段代码：

<button class="modal-default-button" @click="$emit('close')">Close</button>

实际上让父母发出'close'，而不是modal孩子。

因此，由于控制模态的属性是showModal，只需将其设置为false：

<button class="modal-default-button" @click="showModal = false">Close</button>

但JSぇdぇ：z zxswい