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的划词搜索实现(备忘)
Sep 14 Javascript
根据json字符串生成Html的一种方式
Jan 09 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 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中使用sockets:从新闻组中获取文章
2006/10/09 PHP
php中定义网站根目录的常用方法
2010/08/08 PHP
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
详解vuex的简单使用
2018/03/12 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
python多线程操作实例
2014/11/21 Python
python中import学习备忘笔记
2017/01/24 Python
Python冲顶大会 快来答题!
2018/01/17 Python
python删除字符串中指定字符的方法
2018/08/13 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
python+pyqt5编写md5生成器
2019/03/18 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
班班通项目实施方案
2014/02/25 职场文书
基督教婚礼主持词
2014/03/14 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL