Vue 实现手动刷新组件的方法


Posted in Javascript onFebruary 19, 2019

开发过程遇到了一个问题,就是我的 router-view 里面渲染出来的组件输入数据之后,我点击 路由视图外边的导航栏 router-link 按钮,可以实现清除 router-view 里面的数据,也就是使组件重新渲染。vm.$forceUpdate()这个方法可以使当前组件调用这个方法时,重新渲染组件。给 router-view 标签添加 key 属性将 key 绑定的值放在状态管理容器里面,通过 状态管理容器的 mutations 或者 actions 触发 key 值的变化,即可实现重新渲染组件的目的。相关实现代码如下

// store/view.js
const state = {
 viewId: 1
};
const getters = {
 getViewId: state => {
  return state.viewId;
 }
};
const mutations = {
 setViewId: (state, payload) => {
  state.viewId++;
 }
};
const actions = {
 setViewId: (context, payload) => {
  context.commit("setViewId", payload);
 }
};
export default {
 namespaced: true,
 state,
 getters,
 mutations,
 actions
};

放置 router-view 标签的Layout 组件

Vue 实现手动刷新组件的方法

触发 viewid,使 router-view 对应的路由组件刷新的地方,比如导航栏组件。

methods: {
  fresh() {
    this.$store.dispatch("view/setViewId")
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的Cookies
Jan 16 Javascript
javascript显示隐藏层比较不错的方法分析
Sep 30 Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
JS不完全国际化&本地化手册 之 理论篇
Sep 27 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 #jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 #jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 #jQuery
详解vue几种主动刷新的方法总结
Feb 19 #Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 #jQuery
Vue动态路由缓存不相互影响的解决办法
Feb 19 #Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 #Javascript
You might like
C#静态方法与非静态方法实例分析
2014/09/22 PHP
文本链接逐个出现的js脚本
2007/12/12 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
Vue $attrs & inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python在图片中添加文字的两种方法
2017/04/29 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
外国语学院毕业生自荐信
2013/10/28 职场文书
财务会计应届生求职信
2013/11/24 职场文书
医学专业应届生的自我评价
2014/02/28 职场文书
颁奖晚会主持词
2014/03/25 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
2014年女职工工作总结
2014/11/27 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
Pygame如何使用精灵和碰撞检测
2021/11/17 Python