美文网首页Vue小技巧
vue 组件销毁并重置

vue 组件销毁并重置

作者: O槑頭槑腦 | 来源:发表于2019-03-29 11:04 被阅读0次

方法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 组件销毁并重置

    方法1 当数据变更后,通过watch 监听,先去销毁当前的组件,然后再重现渲染。使用 v-if 可以解决这个问题 方法2

  • 内存泄漏

    常见的内存泄漏场景 vue组件中定义的计时器不会在组件被销毁时自动销毁,需在beforeDestroy中手动清除 ...

  • vue父子组件的生命周期

    vue中父子组件渲染,子组件更新,至父组件销毁的生命周期钩子函数触发顺序:beforecreate(父)=> cr...

  • vue 的8个生命周期

    Vue 的生命周期指的是组件从创建到销毁的一系列的过程,被称为 Vue 的生命周期,包括初始化–挂载–更新–销毁过...

  • vue 重置子组件的默认状态

    在项目开发中我们经常会遇到需要重置子组件默认状态的情况,可以用以下方式解决: 原理就是:采用v-if会销毁组件并且...

  • Vue中keep-alive的使用

    概念    keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它...

  • vue中keep-alive

    官方定义 keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们...

  • vue-生命周期

    生命周期对应四个进程----创建、挂载。更新、销毁 当我们 new Vue() 实例时,Vue组件会默认执行in...

  • Vue杂记之强制重新生成DOM

    对于一个vue组件,如果我们想要吧它重置到最初始的状态,一般只需要将组件内部的数据进行重置即可。但是在某些情况下,...

  • Vue组件创建和传值

    Vue创建组件的方式 使用Vue.Extend()和Vue.component全局注册组件 首先我们定义一个组件并...

网友评论

    本文标题:vue 组件销毁并重置

    本文链接:https://www.haomeiwen.com/subject/gfzkbqtx.html