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

news/2024/7/7 19:53:53

父子组件刷新页面:

父组件定义函数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删减部分:
<template>
    .......
    <company-add-edit-dialog ref="companyAddEditRef" :reset="reset" />
</template>

<script setup lang="ts">
import { useCompanyInfo } from './models/useCompanyInfo'
import CompanyAddEditDialog from './dialog/CompanyAddOrUpdate.vue'

const {
  openSaveAndUpdate,
  loading,
  companyData,
  deleteCompany,
  companyAddEditRef,
  reset,
} = useCompanyInfo()
</script>

//子组件
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:

<script setup lang="ts">
const isRouter = ref(true)
const reload = () => {
  isRouter.value = false
  nextTick(() => {
    isRouter.value = true
  })
}
provide('reload', reload)
</script>

<template>
  <router-view v-if="isRouter"></router-view>
</template>
<style>
body {
  margin: 0;
}
</style>

要使用的页面:

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

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

reload();

即可刷新页面。


http://lihuaxi.xjx100.cn/news/1710231.html

相关文章

【SA8295P 源码分析】111 - 使用 Infineon 工具升级DHU 的MCU 固件过程指导

【SA8295P 源码分析】111 - 使用 Infineon 工具升级DHU 的MCU 固件过程指导 系列文章汇总见:《【SA8295P 源码分析】00 - 系列文章链接汇总》 本文链接:《【SA8295P 源码分析】111 - 使用 Infineon 工具升级DHU 的MCU 固件过程指导》 打开 Infineon 工具 默认是没有工程的,需…

MySQL - B-树和B+树

在 MySQL 数据库中&#xff0c;索引通常使用 B-树&#xff08;B-tree&#xff09;或 B树&#xff08;B tree&#xff09;数据结构来组织和管理数据。以下是 B-树和 B树在 MySQL 中的主要区别&#xff1a; 节点结构&#xff1a; B-树&#xff1a;B-树的内部节点不仅包含键值对&a…

操作系统知识点复习(一)

1、 &#xff08;多任务操作系统&#xff09;多道程序设计&#xff1a;允许多个程序&#xff08;作业&#xff09;同时进入一个计算机系统的内存并启动进行交替计算的方法&#xff0c;也就是&#xff0c;计算机中可以同时存放多道程序&#xff0c;从宏观上来看它们是并行的&am…

哈希索引(PostgreSQL 14 Internals翻译版)

概览 哈希索引提供了根据特定索引键快速查找tuple ID (TID)的功能。粗略地说&#xff0c;它只是一个存储在磁盘上的哈希表。哈希索引唯一支持的操作是根据相等条件进行搜索。 当一个值插入到索引中时&#xff0c;将计算索引键的哈希函数。PostgreSQL哈希函数返回32位或64位整…

由浅到深 : Self-Attention (自注意力机制)

Self-Attention 看到下面的第一个saw是动词&#xff0c;第二个saw是名词。 因为第一个saw和第二个saw在形式上没有任何差别。如果任务是进行词性的判断&#xff0c;把上面的词直接输入给神经网络&#xff0c;那么它肯定不能够正确分析。 想要正确分析词性&#xff0c;那么该…

vscode Coder Runner 运行C++

1. 设置Code Runner 2. 防止输入读不到&#xff0c;把在终端运行勾上。 3. 设置minw/bin的环境变量 安装mingw教程&#xff1a;https://blog.csdn.net/fancy_male/article/details/133992000 4. 见图

erp是什么意思?ERP系统是什么

本文将为大家讲解&#xff1a;1、erp是什么意思&#xff1f;2、erp系统是什么&#xff1f;3、erp系统的功能&#xff1b;4、erp系统的特点&#xff1b;5、erp系统的搭建流程。 一、erp是什么 ERP系统模板>>>https://www.jiandaoyun.com ERP系统是企业资源计划&#x…

vue3中的hook函数

一、什么是hook hook本质是一个函数&#xff0c;把setup函数中使用的Composition API&#xff08;组合式API&#xff09;进行了封装&#xff0c;类似于vue中的mixin。 自定义hook的优势&#xff1a;复用代码&#xff0c;让setup中的逻辑更清楚易懂。 我们用获取当前鼠标的坐标…