幽灵资源网 Design By www.bzswh.com
数据通过异步操作后,对之前刚加载的数据进行变更后,发现数据不能生效
方案一
当数据变更后,通过watch 监听,先去销毁当前的组件,然后再重现渲染。使用 v-if 可以解决这个问题
<template> <third-comp v-if="reFresh"/> </template> <script> export default{ data(){ return { reFresh:true, menuTree:[] } }, watch:{ menuTree(){ this.reFresh= false this.$nextTick(()=>{ this.reFresh = true }) } } } </script>
这种方式虽然可以实现,太不优雅
方案二
通过vue key 实现,原理官方文档。所以当key 值变更时,会自动的重新渲染。
<template> <third-comp :key="menuKey"/> </template> <script> export default{ data(){ return { menuKey:1 } }, watch:{ menuTree(){ ++this.menuKey } } } </script>
以上这篇vue 强制组件重新渲染(重置)的两种方案就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
标签:
vue,组件,渲染,重置
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...