在 page1.vue 和 page2.vue 中包含 Modal.vue答案

【问题标题】：Include Modal.vue in page1.vue and page2.vue在 page1.vue 和 page2.vue 中包含 Modal.vue
【发布时间】：2020-10-17 14:10:03
【问题描述】：

我开始使用带有 vue.js 的 Laravel，我已经使用 vue.js 创建了一些页面所以我有 modal 我想在两个页面（ page1.vue 和 page2.vue ）中使用而无需重新编写模态 html 代码：

Page1.vue

<template>
   <div>Page 1 </div>
</template>

Page2.vue

<template>
   <div>Page 2 </div>
</template>

如何与这两个页面共享 modal.vue

【问题讨论】：

标签： vue.js

【解决方案1】：

只需将模态组件导入两个页面即可。在这里，我使用 bool modalBool 完成了它，它将切换是否显示模式的天气。

<template>
  <div>
    Page 1
    <modal v-if="modalBool"> </modal>
  </div>
</template>

<script>
import Modal from "./Modal.vue";

export default {
  components: {
    Modal,
  },
  data() {
    return {
      modalBool: false,
    };
  },
};
</script>

<style lang="scss" scoped></style>

您可以添加诸如关闭之类的内容以重置父级中的布尔值

<template>
  <div>
    Page 1
    <modal v-if="modalBool" v-on:close="showInvitationModal = false"> </modal>
  </div>
</template>

这是我的模式示例，它在关闭时会发出 close。父母正在监听这个close，并将重置modalBool。如果用户在模式外或 X 上单击，则会发出此消息

<template>
  <transition name="component-fade" mode="out-in">
    <div class="modal-background" @click.self="$emit('close')">
      <div class="modal-body shadow">
        <h2 class="modal-title">
          <div>{{ title }}</div>
          <div>
            <button class="btn-clear" @click="$emit('close');">
              <font-awesome-icon :icon="timesIcon" class="pointer" />
            </button>
          </div>
        </h2>

        <div>
          <slot></slot>
        </div>
      </div>
    </div>
  </transition>
</template>

【讨论】：