当前位置: 首页 > 编程笔记 >

vue 组件销毁并重置的实现

徐凌
2023-03-14
本文向大家介绍vue 组件销毁并重置的实现,包括了vue 组件销毁并重置的实现的使用技巧和注意事项,需要的朋友参考一下

方法1

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

方法2

<template>
 <third-comp :key="menuKey"/>
</template>

<script>
 export default{
   data(){
     return {
        menuKey:1
      }
   },
   watch:{
      menuTree(){

        ++this.menuKey
      }
   }
}
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍VUE实现自身整体组件销毁的示例代码,包括了VUE实现自身整体组件销毁的示例代码的使用技巧和注意事项,需要的朋友参考一下 V-IF实现组件自身销毁 前面说了一些自己怎么思考得来,如果时间急可直接看 最后~~~~ 通知提示组件案例分析 在编写一些简单的通知组件案例中,可能会这样去写 再看另一个Loading插件案例V-show template : javascript : 看完上一个

  • vue3 接口pending 的时候,切换路由,理论当前实例会被销毁,autoUpdate 变量 和 visible 变量都不存在了,但是打印出来仍然存在。导致离开页面了,定时器还在执行。 关键点在,路由已经切换了 if (autoUpdateCheck.value && visibility.value === 'visible') 这个条件依然成立,导致定时器执行 1.组件实例为什么没有销毁

  • 本文向大家介绍vue组件里的定时器要怎么销毁?相关面试题,主要包含被问及vue组件里的定时器要怎么销毁?时的应答技巧和注意事项,需要的朋友参考一下 const timer = setInterval(() =>{ // 某些定时器操作 }, 500); // 通过$once来监听定时器,在beforeDestroy钩子可以被清除。 this.$once('hook:beforeDestroy',

  • 我正在尝试在我现有的应用程序中使用Jetpack的架构组件实现导航。 我有一个单一的活动应用程序,其中主要片段(。因此,当按下back时,将分离细节片段,并再次显示ListFragment。 对于导航架构,这是自动处理的。不是添加它被替换的新片段,因此片段视图被销毁,而是在按下back以重新创建视图时调用和。 我知道这是一个很好的模式,用于LiveData和ViewModel,以避免使用超过必要的

  • 如果一个具有静态存储持续时间的对象的构造函数的完成或动态初始化在另一个对象的完成之前被排序,则第二个对象的析构函数的完成将在第一个对象的析构函数的启动之前被排序。[注:此定义允许并发销毁。-结束注] 第二个和第一个的完成析构函数可能在不同的线程中吗?

  • 角度5 我遇到的问题是,当我离开一个组件时,该组件仍在监听服务订阅更新并对其采取行动。