如何在单击子组件上存在的按钮时打开父组件中存在的弹出模式？答案

【问题标题】：How to open popup modal present in parent component on clicking button present on child component?如何在单击子组件上存在的按钮时打开父组件中存在的弹出模式？
【发布时间】：2021-02-04 08:16:00
【问题描述】：

我有一个父子组件

父组件：包含模态

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

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

打开模态子组件的按钮

<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.js nuxt.js

【解决方案1】：

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

所以在子组件中应该有@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>

【讨论】：

【解决方案2】：

Vue.component('message', {
  template: '<div class="message" @click="handleClick">Click to Dismiss Message</div>',
  methods: {
    handleClick() {
        this.$emit('click')
    }
  }
})

new Vue({
  el: '#app',
  data: {
    showMessage: true
  },
  methods: {
    toggleMessage () {
        this.showMessage = !this.showMessage
    }
  }
})

检查这个小提琴https://jsfiddle.net/vyq75n0d/

【讨论】：