有没有一种方法可以通过在vue组件外部单击来关闭它？

<template>
  <div>
    <button @click="toggleComponent">打开组件</button>
    <div @click="closeComponent">
      <!-- 这里是vue组件的代码 -->
      <my-component v-if="showComponent"></my-component>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showComponent: false
    };
  },
  methods: {
    toggleComponent() {
      this.showComponent = !this.showComponent;
    },
    closeComponent() {
      this.showComponent = false;
    }
  }
};
</script>