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

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

  • 相关阅读:
    SSL原理
    花不是玫瑰的全部
    sqlserver2008数据类型说明
    js识别半角字符的正则表达式
    js全角字符转半角字符
    java 全角字符转半角
    MySQL数据目录结构
    git使用
    [iOS]MVVM-框架介绍
    圆形进度条
  • 原文地址:https://www.cnblogs.com/cjjjj/p/12405901.html
Copyright © 2011-2022 走看看