SpringBoot+VUE实现父组件刷新页面（添加监听事件）

最新推荐文章于 2022-07-29 16:48:50 发布

木木彡_牧锋

最新推荐文章于 2022-07-29 16:48:50 发布

阅读量386

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/qq_50402849/article/details/108708686

版权

本文介绍了如何在SpringBoot+Vue应用中，通过子组件触发父组件的监听事件来实现页面刷新。具体实现是：父组件设置监听事件`@showInsurInformation`，子组件通过`@click="ossUpload"`触发事件，并在子组件方法中调用`this.$emit('showInsurInformation')`进行通知。

摘要由CSDN通过智能技术生成

SpringBoot+VUE实现父组件刷新页面

子组件让父组件刷新页面 （监听事件)

下图显示的是父组件的页面，则父组件引用子组件，实现流程是：父组件上添加 " @showInsurInformation="insuranceInformations" "作为一个监听事件，一旦子组件点击事件则父组件就会监听到子组件响应的事件，所以在子组件加上一个点击事件 " @click="ossUpload" "，最后一步就是在子组件点击事件方法中加上" this.$emit('showInsurInformation')//添加监听事件 "

上面 "点击上传" 按钮代码如下：

<formImgUpload class="formImgUpload" id="formImgUpload"  @showInsurInformation="insuranceInformations" />

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

木木彡_牧锋

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

博文评论与在线消息提示[开发日志-SpringBoot+Vue]

`or 1 or 不正经の泡泡

12-27

983

没想到就两个礼拜左右没有碰一起的项目代码，就忘得差不多了。还熟悉了一下代码，跪了。okey~接下来的话，来看到今天实现的效果：每次就是这样的一个评论区并且在评论成功之后，还要发送消息给博主。然后如果博主在线的话，那么就要实时进行一个推送，告诉博主，然后博主可以在消息的一个页面看到这个消息：整个过程的话，和一个正常的博文社区，例如CSDN，掘金，思否，知乎是类似的。然后我们要做的就是实现这个东西。那么实现这个功能的话，大概由一下几个点需要明确一下：那么在这里的话，由于篇幅问题，加上这个消息推送服务并不

(原创)springboot+springsecurity+redis+jwt+vue+iframe 做一个前后端分离的SSO单点登陆鉴权系统类似淘宝天猫单点登陆

xuexishaguo的博客

12-20

3万+

1 前言单点登陆系统，简单说就是用户登陆了www.aaa.com之后，再登陆www.bbb.com，就不需要重新输入用户名密码进行登陆，中间会有一个www.sso.com的验证中心。这点类似于淘宝，天猫，当然淘宝的验证中心域名是login.taobao.com，和www.taobao.com是同一个域名。要做到无缝登陆，就需要iframe这个技术，淘宝天猫也是用的iframe，iframe还...

参与评论您还未登录，请先登录后发表或查看评论

子组件传值父组件数据刷新的问题

qq_52685664的博客

07-13

1028

子组件监听值改变，自定义一个事件，在父组件使用时该事件为接收数据接口事件子组件：监听open值的变化，自定义事件this.$emit("refreshPart") watch: { open: { handler(val) { this.inputValue = val if (!val) { this.contractSectId = '' ...

父组件刷新页面，子组件监听父组件更新状态，连带刷新页面（父组件全局刷新子组件，状态管理模式）

qq_36411712的博客

10-28

517

class Children extends React.Component { constructor(props) { super(props); this.state = { childrenList: [] } } componentDidMount(){ this.getData() } // 这个生命周期是重点，传入父组件的更新状态，子组件监听该状态的变化，从而触发子组件刷新列表 componentWillUpdate(n.

vue+springboot工具安装整合

qq_43530407的博客

09-16

1268

前端-vue环境搭建一、安装node.js 1、下载地址（https://nodejs.org/en/）下载完毕后，可以安装node，建议不要安装在系统盘（如C：） 2、基于 Node.js 安装cnpm（淘宝镜像）设置源 npm config set registry https://registry.npm.taobao.org 3、更新npm到最新版本 npm install -g npm 4、设置环境变量（非常重要）说明：设置环境变量可以使得住任意目录下都可以使用npm、vue等命令，而不

JavaScript实现页面加载成功后刷新一遍当前页面（一）

人生若只如初见的博客

10-30

8417

<SCRIPT LANGUAGE="JavaScript"> function fresh(){ if(location.href.indexOf("?reload=true")<0){ location.href+="?reload=true"; } } setTimeout("fre

SpringBoot整合Vue详解

02-11

本课程是Vue的快速入门课程，涉及到的课程知识点：Vue环境的快速搭建，会使用Vue的生命周期的钩子函数；会使用vue常见指令；会使用vue计算属性和watch监控；会编写Vue组件；掌握组件间通信,会创建Vue实例，知道Vue的常见属性大家都知道涛哥最关心的是找工作，这段时间出去面试的时候会经常会被问及到Vue相关的知识，所以涛哥迫不及待的赶紧出了一版Vue相关的教程，有人问：我们做后台会前台干什么呀？是因为现在的公司老板都想招复合型的人才，招一个Java开发回来恨不得前后台都会，所以我们Java开发人员也要掌握一些前端相关的技能。Java这边现在前端用的比较多的就是VUE，所以大家还是要赶紧学习起来，为了你不被淘汰，为了你能快速适应公司的发展速度，快速找到一份满意的工作，赶紧学起来吧。本课程是Vue的快速入门课程，涉及到的课程知识点：Vue环境的快速搭建，?会使用Vue的生命周期的钩子函数；?会使用vue常见指令；会使用vue计算属性和watch监控；会编写Vue组件；掌握组件间通信；用2小时看完，就可以快速上手公司里的项目，后期还会有实战项目上线，请大家持续关注。

springboot+mybatisplus+vue+elementUI分页.rar

10-29

标题 "springboot+mybatisplus+vue+elementUI分页.rar" 描述了一种使用现代技术栈构建的后台管理系统，其中包含了SpringBoot、MyBatisPlus、Vue.js和Element UI等组件，主要用于实现数据的后台分页功能。下面将详细...

SpringBoot+Thymeleaf+SSM+Vue.js实现简单的增删改查

01-27

在这个项目中，Vue.js主要用于实现前端页面的数据绑定和交互，通过Ajax与后端进行异步通信，实现无刷新的页面更新。在实际操作中，我们需要先配置SpringBoot的Thymeleaf模板引擎，包括设置视图解析器路径，然后...

父组件数据更新之后，子组件重新进行渲染并且更新页面。

qq_47530527的博客

07-29

3817

父组件数据更新之后，子组件重新进行渲染并且更新页面。

一个实际的案例介绍Spring Boot + Vue 前后端分离

dgnwy6921的博客

11-19

2743

介绍最近在工作中做个新项目，后端选用Spring Boot，前端选用Vue技术。众所周知现在开发都是前后端分离，本文就将介绍一种前后端分离方式。常规的开发方式采用Spring Boot 开发项目开发项目常规的方式其实很简单，无非还是采用原来Spring Mvc那一套，建控制器（Controller）然后建方法（action）再添加模板引擎（spring boot 推荐使用thyme...

boke | vue中实现在子组件中刷新父组件列表

Linda的前端开发路

07-27

9209

vue中实现在子组件中刷新父组件列表

websocket实现页面数据实时加载(Springboot+vue)

linbyte的博客

12-25

1万+

在这里先提供两种思路。要实现页面数据的实时加载有两种方式，第一种是长轮询的方式。要么是后台长轮询，检测到数据变化时，通知websocket你该更新一下数据了。要么是前台长轮询，每隔一段时间发起请求获取数据。结合前后台长轮询的方式，这里想给各位推荐第二种--手动通知。我不频繁发起请求，我只在当我后台数据发上变化时，我通知websocket你该更新一下数据了。在这篇文章中，前台长轮询的方式是最...

vue项目如何刷新当前页面

zyx的博客

12-25

800

https://cn.vuejs.org/v2/api/#provide-inject 这是vue 文档中描述使用过程 provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来...

vue强制刷新组件