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 相关文章推荐
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
JqGrid web打印实现代码
May 31 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 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
长波有什么东西
2021/03/01 无线电
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
php输入流php://input使用浅析
2014/09/02 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
php和asp语法上的区别总结
2019/05/12 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
JQUERY操作JSON实例代码
2010/02/09 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
angularjs指令之绑定策略(@、=、&)
2017/04/13 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
python基础教程之udp端口扫描
2014/02/10 Python
Python中__call__用法实例
2014/08/29 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
Python3标准库总结
2019/02/19 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
python连接mongodb集群方法详解
2020/02/13 Python
python 实现超级玛丽游戏
2020/11/25 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
国际政治学专业推荐信
2014/09/26 职场文书
检讨书大全
2015/01/27 职场文书
写给女朋友的保证书
2015/05/09 职场文书
导游词之昭君岛
2020/01/17 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android