zoukankan      html  css  js  c++  java
  • [转]vue重新渲染组件(重置或者更新)

    方案一:v-if(可以重置生命周期)

    当数据变更后,通过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>

    这种方式虽然可以实现,但太不优雅  

    方案二 ::key=‘’(此处可触发watch和update)

    通过vue key 实现,原理请查看官方文档。所以当key 值变更时,会自动的重新渲染。

    <template>   <third-comp :key="menuKey"/></template> <script>   export default{       data(){          return {                menuKey:1            }       },       watch:{             menuTree(){                ++this.menuKey            }       }}</script> 

    方案三:this.$forceUpdate

    这个方法可以使当前组件调用这个方法时,重新渲染组件。


    ---------------------
    作者:泥土里的绽放
    来源:CNBLOGS
    原文:https://www.cnblogs.com/cjjjj/p/12405901.html
    版权声明:本文为作者原创文章,转载请附上博文链接!

  • 相关阅读:
    2020年4月13日
    2021年4月12日
    梦断代码阅读笔记02
    Shell基本命令
    远程链接Linux
    Linux文档与目录结构
    VMware与Centos系统安装
    linux 第一天
    day88 Vue基础
    python 生成随机验证码
  • 原文地址:https://www.cnblogs.com/jialikesensi/p/13361318.html
Copyright © 2011-2022 走看看