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 相关文章推荐
二级域名转向类
Nov 09 Javascript
javascript call方法使用说明
Jan 11 Javascript
javascript使用location.search的示例
Nov 05 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
javascript arguments使用示例
Dec 16 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
jquery实现网页定位导航
Aug 23 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
js实现前端界面导航栏下拉列表
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
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
Python双链表原理与实现方法详解
2020/02/22 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
年度考核自我鉴定
2014/02/02 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
财会专业大学生求职信
2014/09/26 职场文书
开学典礼致辞
2015/07/29 职场文书
简短清晨问候语
2015/11/10 职场文书
Python编写nmap扫描工具
2021/07/21 Python