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 相关文章推荐
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
JavaScript中string对象
Jun 12 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
JS数组方法reverse()用法实例分析
Jan 18 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获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
php查询内存信息操作示例
2019/05/09 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
Windows下安装Scrapy
2018/10/17 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
基于opencv实现简单画板功能
2020/08/02 Python
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
幼儿学前班评语
2014/12/29 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
2015年财政所工作总结
2015/04/25 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
百万英镑观后感
2015/06/09 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
市场营销计划书
2019/04/24 职场文书
MySQL 视图(View)原理解析
2021/05/19 MySQL
React forwardRef的使用方法及注意点
2021/06/13 Javascript
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers
Golang 入门 之url 包
2022/05/04 Golang
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android