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工具方法弹出蒙版
May 08 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 Javascript
功能完善的小程序日历组件的实现
Mar 31 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数组函数
2008/08/18 PHP
php 获得汉字拼音首字母的函数
2009/08/01 PHP
php强制下载类型的实现代码
2011/04/21 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
python超时重新请求解决方案
2019/10/21 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
什么是Python包的循环导入
2020/09/08 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
护理专业学生的求职信范文
2013/12/11 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
创业计划书之个人工作室
2019/08/22 职场文书