在vue组件中单击保存按钮后如何关闭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>

<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>

<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>