vue3点击按钮销毁函数

在 Vue 3 中，你可以使用 `@click` 指令来监听按钮的点击事件，并在点击时执行销毁函数。以下是一个示例代码来演示如何在点击按钮时执行销毁函数：

<template>
  <button @click="destroyComponent">销毁组件</button>
</template>

<script>
import { onUnmounted } from 'vue';

export default {
  methods: {
    destroyComponent() {
      // 在按钮点击时执行的逻辑
      console.log('按钮被点击了');
      // 执行销毁函数
      this.destroy();
    },
    destroy() {
      // 在销毁函数中执行的逻辑
      console.log('组件被销毁了');
      // 执行其他销毁操作
      // ...
    }
  },
  mounted() {
    // 在组件挂载时注册销毁函数
    onUnmounted(() => {
      this.destroy();
    });
  }
}
</script>

在上面的示例中，我们在模板中使用 `@click` 指令来监听按钮的点击事件，并将其绑定到 `destroyComponent` 方法上。这个方法中，我们执行按钮点击时的逻辑，并调用 `this.destroy()` 来执行销毁函数。

需要注意的是，为了在组件内部使用 `onUnmounted` 函数，我们需要从 Vue 的 `@vue/runtime-dom` 模块中导入它。确保你的项目中已经正确安装了 Vue 3，并且在代码中正确导入了这个函数。