vue3+ts父子组件以及单页面刷新的方法

父子组件刷新页面：

父组件定义函数reset，子组件props接收

示例一：

父组件
//ts删减部分：
import { deleteCompanyById, findAllCompanys } from '@/api/company'
import { usePureFetch } from '@/nexus/useFetch'
import type CompanyAddEditDialog from './dialog/CompanyAddOrUpdate.vue'
import type { Company } from '@/models/company'

export const useCompanyInfo = function () {
  const { data, loading, reFetch } = usePureFetch(findAllCompanys)

  const reset = () => reFetch()
  return {
 companyData,
    loading,
    companyAddEditRef,
    openSaveAndUpdate,
    deleteCompany,
    reset,
  }
}
vue删减部分：




//子组件
const props = defineProps<{ reset: Function }>()
/**
 * 提交表单
 */
async function submitCompany() {
  saving.value = true
  try {
    await companyFormRef.value?.validate()
    const res = await saveCompany(companyFormData.value)
    if (res.success) {
      ElMessage.success('提交成功')
      companyDialogVisible.value = false
      props.reset()
    }
  } catch (error) {
    //
  } finally {
    saving.value = false
  }
}

示例二： 

页面刷新方法：

App.vue：

要使用的页面：

import { inject } from "vue";
const reload = inject("reload");

然后在需要调用刷新操作的代码下执行：

reload();

即可刷新页面。