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.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
jQuery.prop() 使用详解
Jul 19 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
可拖拽组件slider.js使用方法详解
Dec 04 Javascript
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
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
JS实现self的resend
2010/07/22 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
python将人民币转换大写的脚本代码
2013/02/10 Python
Python删除空文件和空文件夹的方法
2015/07/14 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
使用Python读取大文件的方法
2018/02/11 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
服装厂厂长岗位职责
2013/12/27 职场文书
初中三好学生事迹材料
2014/01/13 职场文书
中学教师教育感言
2014/02/21 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
python字典进行运算原理及实例分享
2021/08/02 Python