时间戳

首页 > 解决方案 > 如何在单击子组件上存在的按钮时打开父组件中存在的弹出模式？

vue.js - 如何在单击子组件上存在的按钮时打开父组件中存在的弹出模式？

问题描述

我有一个父子组件

父组件：包含模态

子组件：包含用于切换模式的按钮

如何在单击子组件中存在的按钮时打开模式

打开模态子组件的按钮

<button class="btn btn-primary" @click="openModal()">Click to Open</button>

父组件中的模态

<b-modal
    id="bv-modal-lead"
    header-class="py-2 bg-primary text-white"
    body-class="p-0"
    hide-footer
    style="z-index:9999;"
    size="md"
    no-close-on-esc
    no-close-on-backdrop
    header-close-variant="light">
    <template v-slot:modal-title>Required Details</template>

    <div class="d-block p-0">
        <ChildCopmonent
            @openModal="clickToOpen"/>
        </div>
</b-modal>

//父母

<script>
    export default {
        methods:{
            openModal(){
                this.$bvModal.show('bv-modal-lead')
            }
            
        }
    }
</script>

如何通过单击子组件中存在的按钮打开父模式

标签： vue.jsnuxt.js

解决方案

您可以在子组件中发出事件并在父组件中获取它。

所以在子组件中应该有事件名称在@click="$emit('openModalEvent')"哪里openModalEvent（它可以是openModal但记住它是一个事件而不是一个方法）。

openModalEvent现在您可以在父组件中侦听事件 -要调用的方法@openModalEvent="openModal"在哪里。openModal

孩子

<button class="btn btn-primary" @click="$emit('openModalEvent')">Click to Open</button>

家长

<b-modal
    id="bv-modal-lead"
    header-class="py-2 bg-primary text-white"
    body-class="p-0"
    hide-footer
    style="z-index:9999;"
    size="md"
    no-close-on-esc
    no-close-on-backdrop
    header-close-variant="light">
    <template v-slot:modal-title>Required Details</template>

    <div class="d-block p-0">
        <ChildCopmonent @openModalEvent="openModal" />
    </div>
</b-modal>

推荐阅读