CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Juri Bojka
Juri Bojka

Reputation: 415

Vue.js close modal from child component

I want to close vuejs modal from child component inside this modal. Case:

<modal name="some-modal">
        <some-component></some-component>
</modal>

Inside SomeComponent i want to close some-modal. Is it good approach ? Can it be done better way ? Please adivse, Regards

Upvotes: 5

Views: 23631

Answers (4)

Stephan-v
Stephan-v

Reputation: 20289

Sure no problem. You can use Vue's custom event system:

https://v2.vuejs.org/v2/guide/components.html#Custom-Events

As far as judging if this is the ideal approach, nobody can tell with the minimal amount of information you have given.

Upvotes: 0

Вова Тихонов
Вова Тихонов

Reputation: 1

You can use scoped slot to pass the callback to close parent modal, e.g.:

modal.vue

<template>
  <div>
    <slot :close="close">
    </slot>
  </div>
</template>

<script>
  export default {
    name: 'Modal',
    methods: {
      close() {
        // Whatever you do to close the modal
      }
    }
  }
</script>

Now you can use it in the slot:

<modal name="some modal" v-slot="slotScope">
  <some-component @close="slotScope.close" />
</modal>

This way, whenever you emit 'close' event in 'some-component', it will trigger the close method in 'modal' component.

Upvotes: -1

Georgi Antonov
Georgi Antonov

Reputation: 1641

Here is a custom modal i made myself which is using slot to push content into it.

myModal.vue


<template>
    <transition name="modal">
        <div class="modal-mask">
            <div class="modal-wrapper">
                <header class="modal-header header-toolbar">
                    <h3>
                        <span>{{modalTitle}}</span>
                    </h3>
                    <span class="icon">
                        <i class="fa fa-times" aria-hidden="true" @click="hideModal"></i>
                    </span>
                </header>
                <section class="modal-body">
                    <slot></slot>
                </section>
            </div>
        </div>
    </transition>
</template>

<script>
    export default {
        name: 'my-modal',
        props: {
            modalTitle: {
                type: String,
                default: null,
            },
        },
        methods: {
            hideModal() {
                this.$emit('hide');
            },
        },
    };
</script>

How to use it:

<my-modal v-if="modalState" @hide="modalState = false">
            ...Content
</my-modal>

set modalState in data to false, or define it as prop or whatever. when you want to show the modal just change it to true. If you want class definitions i can give you the scss also

Upvotes: 0

Shubham Patel
Shubham Patel

Reputation: 3289

You need to emit an event from the child component using this.$emit('exit', true).

Then listen for that event in the parent component (Modal).

<modal name="some-modal">
    <some-component @exit="closeModal"></some-component>
</modal>

Then write the logic to closeModal function.

Upvotes: 10

Related Questions