这很有效，但我确信有更好的方法可以做到这一点。请查看底部附近的<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>
部分。
HTML：
{{1}}
Modal.vue：
{{1}}
有更好的方法吗？
答案 0 :(得分：2)
是的，从模态组件中发出关闭事件并且在收到关闭发射时处理父组件中的关闭是有的。我无法获得荣誉，因为我在官方网站here上看到了这一点。
基本上在模态模板中
<button @click="$emit("close")">close </button>
然后在使用modal的组件中添加数据
中的open modal属性data: function () { return { open: false }}
当你使用模态组件
时<modal @close="open = false">...</modal>
Mind @close是你从modal发出的事件，如果你在模态中使用$ emit（＆＃34; die＆＃34;），它可以是@die的工作。
当你想打开模态时，你可以使用类似的方法
<a @click="open = true">open modal</a>
如果你这样做，它的数据驱动并且易于重用。
修改
好的，如果你想从模态组件外部添加按钮，那么定义你的插槽，只需在其中一个插槽中添加一个按钮，或者在open = false