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 tools之tooltip
Jul 25 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
vue+element实现表单校验功能
May 20 Javascript
小程序接口的promise化的实现方法
Dec 11 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微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
php之可变变量的实例详解
2017/09/12 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
node后端服务保活的实现
2019/11/10 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
python如何编写win程序
2020/06/08 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
元旦晚会邀请函
2014/02/01 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
出纳会计岗位职责
2014/03/12 职场文书
自我管理的活动方案
2014/08/25 职场文书
健康状况证明书
2014/11/26 职场文书
党支部季度考核意见
2015/06/02 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
小学语文国培研修日志
2015/11/13 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
python模板入门教程之flask Jinja
2022/04/11 Python