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

Question

这有效，但我相信有更好的方法来做到这一点。请看document.getElementsByClassName()底部附近的部分。

html：

<modal>
  <a slot="trigger">Show Modal</a>
  <h3 slot="header">My Heading</h3>
  <p slot="body">Here is the body of the modal.</p>
  <div slot="footer">
    Here is the footer, with a button to close the modal.
    <button class="close-modal">Close Modal</button>
  </div>
</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>

有一个更好的方法吗？

Answer 1

是的，它是从模态组件内发出关闭事件，而不是在收到关闭发射时处理父组件中的关闭事件。我不能把功劳，因为我看到这个官方网站VUE这里。

基本上在模态模板中

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

然后在使用 modal 的组件中在 data 中添加 open modal 属性

data:  function () { return { open: false }}

当你使用模态组件时

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

注意@close 是您从模态发出的事件，如果您在模态中使用 $emit ("die")，它可以是任何 @die 工作的事件。

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

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

如果你这样做，它的数据驱动并且易于重用。

编辑

好的，如果你想从模态组件外部添加按钮，那么定义你的插槽，然后在这些插槽之一或所有这些插槽中添加一个按钮 open = false