vue3 使用 defineOptions

<script setup lang="ts">

import { ref, reactive, ComponentPublicInstance } from 'vue'

// * defineExpose暴露出来的方法，接口实现
interface IInstance extends ComponentPublicInstance {
getData(): void
}

defineOptions({
name: '***',
beforeRouteEnter(_to, _from, next) {
next((vm) => {
const instance = vm as IInstance
instance.getData() // 刷新列表数据（不缓存）
})
}
})

// 获取表格数据（示例方法）
const listData = ref([])
const getData = async () => {
listData.value = []
}

// * beforeRouteEnter中要用到的方法，需要暴露出来
defineExpose({ getData })
</script>

安装依赖

npm i unplugin-vue-macros -D

配置依赖

// vite.config.ts
import DefineOptions from 'unplugin-vue-define-options/vite'
export default defineConfig({
  plugins: [DefineOptions()],
})

ts 支持

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["unplugin-vue-define-options/macros-global" /* ... */]
  }
}

更多使用细节请看文档

https://vue-macros.sxzz.moe/macros/define-options.html