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的面向对象和继承有利新手学习
Jan 11 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
JavaScript中Function详解
Feb 27 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 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/03 冲泡冲煮
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
简单学习Python多进程Multiprocessing
2017/08/29 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
一个C/C++编程面试题
2013/11/10 面试题
电信专业应届生自荐信
2013/09/28 职场文书
拉丁舞学习者的自我评价
2013/10/27 职场文书
小学生美德少年事迹
2014/02/02 职场文书
上海世博会口号
2014/06/19 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS