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

news2025/1/12 1:46:18

父子组件刷新页面:

父组件定义函数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://www.coloradmin.cn/o/1128071.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023 | 组蛋白乳酸化如何影响免疫、自噬最新发现!

乳 酸 乳酸是人体循环系统最丰富的代谢产物之一。乳酸由糖酵解的终产物丙酮酸盐通过乳酸脱氢酶&#xff08;LDH&#xff09;产生。有氧条件下&#xff0c;丙酮酸盐可以穿梭进入线粒体&#xff0c;以促进生物合成途径和ATP产生。当氧气不足时&#xff0c;丙酮酸转化为乳酸&…

asp.net文档管理系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio

一、源码特点 asp.net文档管理系统是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为sqlserver2008&#xff0c;使用c#语言开发 asp.net文档管理系统 二、功能介绍 (1…

如何系列 如何玩转远程调用之OpenFegin+SpringBoot(非Cloud)

文章目录 简介原生Fegin示例基础契约日志重试编码器/解码器自定义解码器 请求拦截器响应拦截器表单文件上传支持错误解码器断路器指标metrics客户端 配合SpringBoot&#xff08;阶段一&#xff09;配合SpringBoot&#xff08;阶段二&#xff09;1.EnableLakerFeignClients2.Lak…

spring cloud Eureka集群模式搭建(IDEA中运行)《一》

spring cloud Eureka集群模式搭建&#xff08;IDEA中运行&#xff09; 新建springboot 工程工程整体目录配置文件IDEA中部署以jar包形式启动总结 新建springboot 工程 新建一个springboot 工程&#xff0c;命名为&#xff1a;eureka_server。 其中pom.xml文件为&#xff1a; …

Mask Free VIS笔记(CVPR2023 不需要mask标注的实例分割)

paper: Mask-Free Video Instance Segmentation github 一般模型学instance segmentation都是要有mask标注的&#xff0c; 不过mask标注既耗时又枯燥&#xff0c;所以paper中仅用目标框的标注来实现实例分割。 主要针对视频的实例分割。 之前也有box-supervised实例分割&…

去除QPushButton边框上的白点

使用border:3px solid #35FFFAF0; 出现上面一行border上白点。 使用border:3px solid rgb(89,87,84); 没有白点。

1.java环境搭建与eclipse安装和配置

JDK&#xff08;JAVA开发工具包&#xff09;&#xff1a;提供给java开发人员使用的&#xff0c;其中包含了java的开发工具&#xff0c;也包括了JRE所以安装了JDK,就不用单独安装JTE了&#xff0c;其中的开发工具&#xff1a;编译工具(javac.exe) 打包工具(jar.exe)等JRE(JAVA运…

什么年代了还在手工写接口测试文档吗?

01 前言 接口文档&#xff0c;顾名思义就是对接口说明的文档。好的接口文档包含了对接口URL&#xff0c;参数以及输出内容的说明&#xff0c;我们参照接口文档就能编写出一个个的测试用例。而且接口文档详细的话&#xff0c;测试用例编写起来就会比较简单&#xff0c;不容易…

MES 漫谈123

我们从Know-How出发 Know&#xff1a;什么是 MES 制造执行系统MES是一套工具&#xff0c;旨在支持产品达到预期的质量、安全和合规水平&#xff0c;以及生产的预期性能水平。MES是支持工厂质量标准和企业卓越运营计划的关键要素。在工厂层面&#xff0c;MES不是通过“最后一天…

Telegram 引入了国产小程序容器技术

Telegram 宣布为其开发者提供了一项“能够在 App 中运行迷你应用”的新功能&#xff08; 迷你应用即 Mini App&#xff0c;下文中以“小程序”代替&#xff09;。 在一篇博客文章中&#xff0c;Telegram 的开发者写到“小程序提供了可替代互联网网站的灵活界面&#xff08;cre…

DataX 数据迁移

1、前期准备 Linux系统 Python&#xff08;最好是2&#xff09; Jdk 1.8以上 2、安装Python2 --更新软件包 sudo apt update --安装python2 sudo apt install python2 --查看python版本 python2 --version 3、下载DataX Linux下载DataX wget http://datax-opensource.o…

攻防世界-Ph0en1x-100

第一次独立使用frida解安卓题&#xff0c;没分析代码 Steps 使用jadx打开apk分析主要代码 最主要的就是这个if判断了&#xff0c;安装apk后&#xff0c;有一个输入框和一个check按钮&#xff0c;会根据输入的结果Toast&#xff1a;Success or Failed。 getSecret(getFlag()).eq…

深入了解JavaScript中的AJAX和HTTP请求

在现代Web开发中&#xff0c;AJAX&#xff08;Asynchronous JavaScript and XML&#xff09;和HTTP请求被广泛应用于实现动态交互式网页。本文将深入探讨AJAX的概念、工作原理以及使用方法。 什么是AJAX&#xff1f; AJAX是一种利用JavaScript和HTTP请求与服务器进行异步通信的…

基于公开数据集,5 分钟生成个性可视化数据报告

云布道师 简介&#xff1a; 本次活动将基于内置电商、广告、出行、汽车、国内生产总值等公开数据集&#xff0c;通过DataWorks 与 MaxCompute 搭建可视化数据报告。 活动时间 2023 年 10 月 8 日-2023 年 11 月 10 日 参赛者首先前往参赛页面领取产品免费资源&#xff0c;依…

Redis基于布隆过滤器解决缓存穿透问题(15)

Redis基于布隆过滤器解决缓存穿透问题 1.布隆过滤器基本介绍2.布隆过滤器的优缺点3.布隆过滤器的原理4.缓存穿透问题5.解决Redis缓存穿透问题 1.布隆过滤器基本介绍 布隆过滤器适用于判断某个数据是否在集合中存在&#xff0c;可能存在一定的误判&#xff0c; Bloom Filter基本…

教育行业如何通过互联网推广品牌?媒介盒子告诉你

近年来&#xff0c;国民对教育的重视程度日趋上升&#xff0c;教育行业也日益壮大&#xff0c;数字化时代的来临也使教育行业推广品牌的方式更加多样化&#xff0c;接下来媒介盒子就和大家分享&#xff1a;教育行业如何通过互联网推广品牌。 一、 发布软文进行品牌推广 数字…

docker-compose安装ES7.14和Kibana7.14(有账号密码)

一、docker-compose安装ES7.14.0和kibana7.14.0 1、下载镜像 1.1、ES镜像 docker pull elasticsearch:7.14.0 1.2、kibana镜像 docker pull kibana:7.14.0 2、docker-compose安装ES和kibana 2.1、创建配置文件目录和文件 #创建目录 mkdir -p /home/es-kibana/config mkdir…

“它经济”盛行,宠物食品行业如何做好口碑营销

口碑营销能够为企业带来潜在优势&#xff0c;让企业实现可持续发展&#xff0c;好的口碑能够提升品牌的传播速度&#xff0c;作为宠物食品行业&#xff0c;更需要营造良好口碑&#xff0c;才能获得源源不断的客户&#xff0c;那么如何打造口碑呢&#xff1f;数字化时代下&#…

前端请求后台接口失败处理逻辑

前后分离项目&#xff0c;前端为uni-app&#xff08;vue2&#xff09;&#xff0c;后台为java 后台api设置存在问题&#xff0c;部分公共接口为开放非登录用户访问权限 导致前台打开首页后立即跳转到登录提示页 怀疑是开了uni-app开发代理服务器&#xff0c;导致访问的代理服务…

openGaussDatakit让运维如丝般顺滑!

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&am…