vue 组件销毁并重置的实现


Posted in Javascript onJanuary 13, 2020

方法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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
VUE实现自身整体组件销毁的示例代码
Jan 13 #Javascript
微信小程序聊天功能的示例代码
Jan 13 #Javascript
js实现适配移动端的拖动效果
Jan 13 #Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 #Javascript
优化Vue中date format的性能详解
Jan 13 #Javascript
JS document文档的简单操作完整示例
Jan 13 #Javascript
JavaScript数组排序小程序实现解析
Jan 13 #Javascript
You might like
论建造顺序的重要性
2020/03/04 星际争霸
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
PHP 函数学习简单小结
2010/07/08 PHP
PHP面向对象详解(三)
2015/12/07 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
大学生求职自荐信
2013/12/12 职场文书
保护环境标语
2014/06/09 职场文书
文明社区申报材料
2014/08/21 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
预备党员个人总结
2015/02/14 职场文书
春节晚会开场白
2015/05/29 职场文书
大学同学聚会感言
2015/07/30 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
创业计划书之宠物店
2019/09/19 职场文书
Java中使用Filter过滤器的方法
2021/06/28 Java/Android
如何通过cmd 连接阿里云服务器
2022/04/18 Servers
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技