• 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

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

  • 相关阅读:
    细说:Http协议 篇
    连接池
    实践
    事务
    一、Jdbc 入门
    ES6之路第一篇:let、const
    vue2饿了吗之路第二篇:登录
    RabbitMQ(三)——简单模式
    RabbitMQ(二)——模式类型
    RabbitMQ(一)——简介
  • 原文地址:https://www.cnblogs.com/cjjjj/p/12405901.html
Copyright © 2020-2023  润新知