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 相关文章推荐
TBCompressor js代码压缩
Jan 05 Javascript
node在两个div之间移动,用ztree实现
Mar 06 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
jQuery获取上传文件的名称的正则表达式
May 21 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
理解 JavaScript EventEmitter
Mar 29 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 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
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
javascript定时器完整实例
2015/02/10 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
python的多重继承的理解
2017/08/06 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
python打包成so文件过程解析
2019/09/28 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
小区门卫工作职责
2013/12/14 职场文书
棉花姑娘教学反思
2014/02/15 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
地震捐款倡议书
2014/08/29 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
灵山大佛导游词
2015/02/04 职场文书
2015年教师节慰问信
2015/03/23 职场文书
商场收银员岗位职责
2015/04/07 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android