Vue.js Vuejs模式组件传递数据

我被困在VueJS中为我的应用程序制作一个模态组件。我希望能够将它放在自己的组件中以实现可重用性，能够传递自定义内容并具有多个模态

我制作了该组件，它看起来像VueJS文档中的：

Modal.vue

<template>
  <div ref="modal">
    <script type="text/x-template" id="modal">
      <transition name="modal">
        <div class="modal-mask">
          <div class="modal-wrapper">
            <div class="modal-container">

              <div class="modal-header">
                <slot name="header">
                  Header
                </slot>
              </div>

              <div class="modal-body">
                <slot name="body">
                  Body
                </slot>
              </div>

              <div class="modal-footer">
                <slot name="footer">
                  Footer
                </slot>
                <button class="btn btn-primary" @click="$emit('close')">
                  Button
                </button>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </script>
  </div>
</template>


<script>

  export default {
    components: { },
    props: ['header', 'footer', 'body', 'button'],
    data: () => ({
      showModal: false
    }),
    methods: {
      open () {
        console.log('Opening modal')
        this.showModal = true
      }
    }
  }
</script>

<style>

  #modal {
    /*color: #000;*/
  }

  .modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    display: table;
    transition: opacity .3s ease;
  }

  .modal-wrapper {
    display: table-cell;
    vertical-align: middle;
  }

  .modal-container {
    width: 300px;
    margin: 0px auto;
    /*padding: 20px 30px;*/
    background-color: #25262D;
    color: #FEFEFE;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    font-size: 1.2em;
  }

  .modal-header {
    border-radius: 3px;
    background-color: #202128;
    border: none;
  }

  .modal-header h3 {
    margin-top: 0;
    color: #42b983;
  }

  .modal-body {
    margin: 20px 0;
    /*background-color: #202128;*/
    border: none;
  }

  .modal-footer {
    text-align: center;
    border: none;
  }

  .modal-footer .btn {
    font-size: 1.0em;
  }

  /*
   * The following styles are auto-applied to elements with
   * transition="modal" when their visibility is toggled
   * by Vue.js.
   *
   * You can easily play with the modal transition by editing
   * these styles.
   */

  .modal-enter {
    opacity: 0;
  }

  .modal-leave-active {
    opacity: 0;
  }

  .modal-enter .modal-container,
  .modal-leave-active .modal-container {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

</style>

标题
身体
页脚
按钮
导出默认值{
组件：{}，
道具：[“页眉”、“页脚”、“正文”、“按钮”]，
数据：（）=>({
showModal:错误
}),
方法：{
开（）{
console.log（'打开模式'）
this.showModal=true
}
}
}
#模态{
/*颜色：#000*/
}
.模态掩码{
位置：固定；
z指数：9998；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,5）；
显示：表格；
过渡：不透明度。3s缓解；
}
.模态包装器{
显示：表格单元格；
垂直对齐：中间对齐；
}
.集装箱{
宽度：300px；
保证金：0px自动；
/*填充：20px 30px*/
背景色：#25262D；
颜色：#FEFEFE；
边界半径：3px；
盒影：0 2px 8px rgba（0,0,0,33）；
过渡：全部。3秒轻松；
字体大小：1.2米；
}
.模态标题{
边界半径：3px；
背景色：#202128；
边界：无；
}
.模态头h3{
边际上限：0；
颜色：#42b983；
}
.模态体{
利润率：20px0；
/*背景色：#202128*/
边界：无；
}
.模态页脚{
文本对齐：居中；
边界：无；
}
.modal footer.btn{
字号：1.0em；
}
/*
*以下样式将自动应用于具有
*切换其可见性时的transition=“modal”
*由Vue.js编写。
*
*通过编辑，您可以轻松地使用模式转换
*这些款式。
*/
.模态输入{
不透明度：0；
}
.调休有效{
不透明度：0；
}
.modal输入.modal容器，
.modal保持活动状态。modal容器{
-webkit转换：比例（1.1）；
转换：比例（1.1）；
}

我在App.vue中添加了一个模式：

<button @click="openUpdatedModal()" type="button" class="btn btn-default" data-toggle="modal" data-target="#modal">
          Launch Updated Modal
      </button>

      <modal ref="updatedModal" v-if="showModal" @close="showModal = false">
        <!--
          you can use custom content here to overwrite
          default content
        -->
        <div slot="header">custom header</div>
      </modal>

<script>

import Modal from './components/Modal'

export default {
    components: { Modal },
    data: () => ({
        showModal: false
    }),
    methods: {
        openUpdatedModal () {
            this.$refs.updatedModal.open()
        }
    }
}
</script>

启动更新模式
自定义标题
从“./components/Modal”导入模态
导出默认值{
组件：{Modal}，
数据：（）=>({
showModal:错误
}),
方法：{
OpenUpdateModel（）{
这是。$refs.updateModel.open（）
}
}
}

当我点击按钮时，我在控制台中得到文本“打开模式”，但什么也没有发生

我可以召唤它，如果我在App.vue中有所有代码，它就会工作

---

我遗漏了什么？

我创建了一个ModalComponent.vue并删除了Phil在评论中建议的脚本标记，从而使它正常工作。这是密码

ModalComponent.vue：

<template>
 <transition name="modal">
    <div class="modal-mask">
    <div class="modal-wrapper">
        <div class="modal-container">

        <div class="modal-header">
            <slot name="header">
            default header
            </slot>
        </div>

        <div class="modal-body">
            <slot name="body">
            default body
            </slot>
        </div>

        <div class="modal-footer">
            <slot name="footer">
            default footer
            <button class="modal-default-button" @click="$emit('close')">
                OK
            </button>
            </slot>
        </div>
        </div>
    </div>
    </div>
 </transition>
</template>
<script>
  export default{

  }
</script>

标记中的模式按钮：

<button id="show-modal" @click="showModal = true">Show Modal</button>

显示模式

以及在页面上调用的模态组件：

    <modal v-if="showModal" @close="showModal = false">
        <!--
        you can use custom content here to overwrite
        default content
        -->
        <h3 slot="header">custom header</h3>
    </modal>

自定义标题

---

值得注意的是，无论我在哪里使用modal，我都必须声明showModal属性。

为什么模板中有

？你已经在模板里了我想@Phil是对的。这可能会导致你的问题。模板就是模板。脚本就是脚本。将它们分开。我使用了以下方法：删除它们，但仍然存在以下问题：无法读取VueComponent.OpenUpdateModel中未定义的属性“open”

    <modal v-if="showModal" @close="showModal = false">
        <!--
        you can use custom content here to overwrite
        default content
        -->
        <h3 slot="header">custom header</h3>
    </modal>