在vue组件中单击保存按钮后如何关闭modal？

在Vue组件中，要关闭modal，可以通过以下几种方式实现：

使用v-model控制modal的显示与隐藏。在modal组件中，可以使用一个Boolean类型的data属性，例如showModal来控制modal的显示与隐藏。在点击保存按钮后，可以将showModal属性设置为false，从而关闭modal。

<template>
  <div>
    <button @click="showModal = true">打开Modal</button>
    <modal v-model="showModal"></modal>
    <button @click="saveAndClose">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  },
  methods: {
    saveAndClose() {
      // 保存逻辑
      // ...
      this.showModal = false; // 关闭modal
    }
  }
};
</script>

使用事件机制关闭modal。在modal组件中，可以定义一个自定义事件，例如close事件，当点击保存按钮时，触发close事件，然后在父组件中监听该事件，并在事件处理函数中关闭modal。

<template>
  <div>
    <button @click="showModal = true">打开Modal</button>
    <modal @close="closeModal"></modal>
    <button @click="saveAndClose">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  },
  methods: {
    saveAndClose() {
      // 保存逻辑
      // ...
      this.$emit('close'); // 触发close事件
    },
    closeModal() {
      this.showModal = false; // 关闭modal
    }
  }
};
</script>

使用ref引用modal组件，并调用其方法关闭modal。在父组件中，可以使用ref属性引用modal组件，并在点击保存按钮后，通过调用引用的方法来关闭modal。

<template>
  <div>
    <button @click="showModal = true">打开Modal</button>
    <modal ref="modalRef"></modal>
    <button @click="saveAndClose">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  },
  methods: {
    saveAndClose() {
      // 保存逻辑
      // ...
      this.$refs.modalRef.closeModal(); // 调用modal组件的关闭方法
    }
  }
};
</script>

以上是三种常见的关闭modal的方式，具体选择哪种方式取决于你的项目需求和组件结构。在实际开发中，可以根据具体情况选择最适合的方式来关闭modal。