Vue.js 从子组件关闭模式答案

【问题标题】：Vue.js close modal from child componentVue.js 从子组件关闭模式
【发布时间】：2018-02-19 14:16:17
【问题描述】：

我想从这个模态中的子组件关闭 vuejs 模态。案例：

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

在 SomeComponent 内部，我想关闭一些模式。这是好方法吗？可以做得更好吗？请注意，问候

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

您需要使用this.$emit('exit', true) 从子组件发出一个事件。

然后在父组件（Modal）中监听那个事件。

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

然后将逻辑写入closeModal函数。

【讨论】：

【解决方案2】：

当然没问题。你可以使用 Vue 的自定义事件系统：

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

就判断这是否是理想的方法而言，没有人可以用你提供的最少信息来判断。

【讨论】：

【解决方案3】：

这是我自己制作的自定义模式，它使用插槽将内容推送到其中。

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>

使用方法：

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

将 data 中的 modalState 设置为 false，或者将其定义为 prop 或其他。当您想显示模态时，只需将其更改为 true。如果你想要类定义，我也可以给你 scss

【讨论】：

【解决方案4】：

您可以使用作用域插槽来传递回调以关闭父模态，例如：

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>

现在你可以在插槽中使用它了：

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

这样，每当你在 'some-component' 中发出 'close' 事件时，都会触发 'modal' 组件中的 close 方法。

【讨论】：