广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中按钮操作完刷新页面的实现
  • 531
分享到

vue中按钮操作完刷新页面的实现

2024-04-02 19:04:59 531人浏览 安东尼
摘要

目录Vue按钮操作完刷新页面1.父组件中实现2.子组件绑定点击按钮后自动刷新页面vue按钮操作完刷新页面 首先从子组件和父组件角度去写这个东西,简言之就是在父组件中实现这个刷新功能方

vue按钮操作完刷新页面

首先从子组件和父组件角度去写这个东西,简言之就是在父组件中实现这个刷新功能方法,然后在子组件中进行绑定并进行监听就好了啊

1.父组件中实现

① 图示部分:

个人建议这个作为父组件,肯定一般是放在列表中的,即把列表页面作为父组件的归属地

② 代码部分:

method方法中部分

refresh () {
   this.reload()
 }

将reload进行注入

inject: ['reload'],

2.子组件绑定

① 子组件进行绑定

在父组件中引用子组件页面的地方进行绑定

如图:

绑定脚本:

@refresh="refresh"

② 单独去子组件页面处理成功的地方去监听

图示:比如就以这个页面为例子

 进入子页面:

在子页面组件中处理成功后进行监听父组件中刷新方法,以上设置完就ok了

点击按钮后自动刷新页面

在按钮点击事件中添加

window.location.reload();

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue中按钮操作完刷新页面的实现

本文链接: https://www.lsjlt.com/news/153645.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue中按钮操作完刷新页面的实现
    目录vue按钮操作完刷新页面1.父组件中实现2.子组件绑定点击按钮后自动刷新页面vue按钮操作完刷新页面 首先从子组件和父组件角度去写这个东西,简言之就是在父组件中实现这个刷新功能方...
    99+
    2022-11-13
  • vue中按钮操作完刷新页面如何实现
    这篇文章主要介绍“vue中按钮操作完刷新页面如何实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue中按钮操作完刷新页面如何实现”文章能帮助大家解决问题。vue按钮操作完刷新页面首先从子组件和父...
    99+
    2023-07-02
  • Vue实现页面的局部刷新(router-view页面刷新)
    利用Vue里面的provide+inject组合 首先需要修改App.vue。 <template> <!-- 公司管理 --> <di...
    99+
    2022-11-12
  • vue中实现页面刷新以及局部刷新的方法
    目录一.全页面刷新二、局部刷新三、应用场景总结一.全页面刷新 1.修改 App.vue,代码如下: <template> <div id="app"> ...
    99+
    2022-11-12
  • vue中如何实现页面刷新以及局部刷新
    vue中如何实现页面刷新以及局部刷新,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。一.全页面刷新修改 App.vue,代码如下:<template> &n...
    99+
    2023-06-26
  • Vue如何实现页面的局部刷新
    本篇文章给大家分享的是有关Vue如何实现页面的局部刷新,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。利用Vue里面的provide+inject组合首先需要修改App.vue。...
    99+
    2023-06-22
  • Vue+WebSocket页面实时刷新长连接的实现
    最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死。。。 与后台人员讨论过后决定使用h5...
    99+
    2022-11-12
  • Vue3中进行页面局部刷新组件刷新的操作方法
    目录前言开始操作vue2和vue3的区别vue2vue3Vue2和Vue3的钩子函数生命周期对照步入正题,解决今天的问题代码前言 今天在给vue3的项目中进行数据绑定的时候,发现我删...
    99+
    2022-12-20
    Vue3页面局部刷新 Vue3组件刷新 vue局部刷新
  • vue 点击按钮 路由跳转指定页面的实现方式
    目录点击按钮 路由跳转指定页面最终效果vue跳转页面常用的方式1:router-link跳转2:this.$router.push()3:this.$router.replace()...
    99+
    2022-11-13
  • Vue实现刷新当前页面的三种方式总结
    目录背景思路实现方式1-通过location.reload和$router.go(0)方法方式2-通过空白页面方式3-通过provide和inject背景 项目当中如果做新增/修改/...
    99+
    2023-01-14
    Vue刷新当前页面 Vue刷新页面
  • Vue实现当前页面刷新的4种方法举例
    目录前言方法一:location.reload方法二:$router.go(0)方法三:provide、inject和$nextTick方法四:创建空白页总结前言 这两周在写一个后台...
    99+
    2023-05-18
    vue页面刷新方法 vue当前页面刷新 vue重新加载当前页面
  • vue中实现全页面或局部刷新的方法是什么
    今天就跟大家聊聊有关vue中实现全页面或局部刷新的方法是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。vue中怎么实现页面刷新一.全页面刷新修改 App.vue,代码如下:<...
    99+
    2023-06-22
  • vue点击按钮实现让页面的某一个元素全屏展示
    目录点击按钮让页面的某一个元素全屏展示先上效果图页面结构在页面加载时添加监听vue全屏和退出全屏调用事件页面全屏部分元素全屏退出全屏调用事件点击按钮让页面的某一个元素全屏展示 先上效...
    99+
    2022-11-13
  • Vue实现父子组件页面刷新的几种常用方法
    目录1、原地页面重新加载(不推荐)2、空白页面作为过渡3、使用Provide / Inject组合控制显示4、v-on:param父组件监听子组件事件参考文档:很多时候我们在操作过页...
    99+
    2022-11-13
  • Vue实现点击按钮下载文件的操作代码(后端Java)
    上篇文章给大家介绍过vue实现点击按钮下载文件功能,今天继续vue点击按钮下载文件的话题。 最近项目中需要实现点击按钮下载文件的需求,前端用的vue,因为文件是各种类型的,比如图片、...
    99+
    2022-11-12
  • element中table操作按钮展示与折叠的实现示例
    目录先来看实现效果。1.遇到问题2.解决思路3.用法4.实例先来看实现效果。 1.遇到问题 因为随着功能的增多,table操作栏中的功能按钮增多,操作列长度就增长,导致不是很美观。...
    99+
    2022-11-13
  • jQuery的ajax中如何使用FormData实现页面无刷新上传功能
    小编给大家分享一下jQuery的ajax中如何使用FormData实现页面无刷新上传功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!1,先看效果图期望的功能和效果很简单:点击页面中的上传...
    99+
    2022-10-19
  • Android编程实现在Activity中操作刷新另外一个Activity数据列表的方法
    本文实例讲述了Android编程实现在Activity中操作刷新另外一个Activity数据列表的方法。分享给大家供大家参考,具体如下:做Android项目中遇到这样一个问题:有两个acticity,一个显示好友列表,另外一个显示会话列表,...
    99+
    2023-05-31
    android activity
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作