Vue.js close modal from child component

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.

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

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.

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.