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

Question

我有一个父组件和子组件

父组件:包含模式

子组件:包含切换模式的按钮

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

按钮以打开模态inchild组件

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

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

Answer 1

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

因此，在子组件中应该有@click="$emit('openModalEvent')"，其中openModalEvent是事件名称(它可以是openModal，但请记住，它是一个事件，而不是一个方法)。

现在您可以在父组件- @openModalEvent="openModal"中侦听openModalEvent事件，其中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>

Answer 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
    }
  }
})

检查此fiddle https://jsfiddle.net/vyq75n0d/