Javascript 更好的添加“的方法”；“关闭模式”；Vue中的按钮

这是可行的，但我相信有更好的方法。请查看底部附近的

文档.getElementsByClassName（）

部分

html:

显示模态
我的标题
这是模态的主体
这是页脚，有一个按钮关闭模式。
闭合模态

Modal.vue：

<template>
    <span>
      <span @click="show = true">
        <slot name="trigger"></slot>
      </span>
      <slot name="header"></slot>
      <slot name="body"></slot>
      <slot name="footer"></slot>
    </span>
</template>

<script>
    export default {
        data() {
            return { show: false }
        },
        mounted(that = this) {
          document.getElementsByClassName('close-modal')[0].addEventListener('click', function () {
            that.show = false;
          })
        }
    }
</script>

导出默认值{
数据（）{
返回{show:false}
},
已安装（即=此）{
document.GetElementsByCassName（'close-modal'）[0]。addEventListener（'click'，函数（）{
that.show=false；
})
}
}

---

有更好的方法吗？

有，它是从模态组件中发出关闭事件，而不是在接收到关闭发出时在父组件中处理关闭。我不能相信这一点，因为我在vue官方网站上看到了这一点

基本上在模态模板中

<button @click="$emit("close")">close </button>

当你使用模态组件时

<modal @close="open = false">...</modal>

。。。

Mind@close是您从modal发出的事件，如果您在modal中使用$emit（“die”），它可以是@die工作的任何事件

当您想要打开模态时，可以使用类似的方法

<a @click="open = true">open modal</a>

开放模式

如果您这样做，它的数据驱动和易于重用

编辑

---

好的，如果你想从模态组件外部添加按钮，那么定义你的插槽，只需在其中一个插槽或所有插槽中添加一个按钮，这将使

open=false

我想把close模态放在标记的内部，而不是组件的内部。这样我可以用很多不同的方法关闭一个模态，但只有一个模态组件。这样做更容易，但你必须遵循相同的方法。。。我要增加我的收入answer@peaceman，也许你能帮我：

<modal @close="open = false">...</modal>

<a @click="open = true">open modal</a>