首页 > 其他分享 >Vue 如何实现组件的切换

Vue 如何实现组件的切换

时间:2022-11-07 22:25:38浏览次数:51  
标签:Vue keep live 销毁 切换 组件

使用场景:我们开发项目的时候,会遇到组件之间的切换,一般都是创建组件销毁组件来回切换 ;但是现在需求是切换组件的时候,另一个组件不会销毁;

基于这个需求 ,我们使用 keep-live 组件包裹起来要切换的组件 ;

keep-live 是 vue 内置的组件 ,避免组件被重新渲染 ;

keep-live 有 2 个钩子函数  activated  - 组件激活触发 ;deactivated 组件失活触发 ;

标签:Vue,keep,live,销毁,切换,组件
From: https://www.cnblogs.com/zhulongxu/p/16867689.html

相关文章

  • VUE3初学
    VUE初学创建一个Vue项目powershell中运行vueui 认识Vue各个文件夹(20条消息)前端Vue项目架构-文件夹作用的分析总结_码大星的博客-CSDN博客 .Vue文件 t......
  • day26 Vue相关内容及深拷贝和浅拷贝
    Vue相关内容概述:Vue是前端的一个Js库(诞生于2015年,兴起于2016年,尤雨溪写的(目前是阿里巴巴在维护)),vue是MVVM模式的框架.MVVM概述:model数据v......
  • Vue路由实现的底层原理
    在Vue中利用数据劫持defineProperty在原型prototype上初始化了一些getter,分别是router代表当前Router的实例、router代表当前Router的实例、router代表当前Router的实例......
  • Springboot 整合 SpringCloud组件-Eureka 微服务 EurekaClient(二)
    我们已经完成了Eureka注册中心Server的搭建与部署,那么这篇,我们就来创建一个微服务EurekaClient,将其成功注册到我们的注册中心去。 同样,创建一个springboot项目,起名clien......
  • Springboot 整合 SpringCloud组件-Gateway 网关服务 (四)
    这篇我将介绍的是网关服务,那么从标题已经知道我们整合的组件时gateway;也许有人说,为啥不用zuul,这个组件也可以用于做网关。至于这两组件的性能比较与区别,我们来看一个表格简......
  • vue共享屏幕功能
    参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getDisplayMedia使用方法:https://developer.mozilla.org/zh-CN/docs/Web/API/Screen_Capture_A......
  • vue实现展开收起
    通过设置css超出换行,监听是否超出所设置的值,重新对数据插入标识,并刷新dom树实现。<divclass="class-datas"> <pclass="datas-title">可排课专业:</p> <p:class="`${......
  • 拖拽功能 vue + 移动端
    1.  在components里面创建一个公共组件,dragMove.vue<!--拖拽滑动效果--><template><divid="item_box"@click="goMove"@touchstart="down"@touchmove="move"......
  • vue2.0引入css文件后报错
    vue2.0的main.js中引入css文件后报错。报错示例:UncaughtError:Moduleparsefailed:/Users/**/Desktop/vue2/node_modules/.1.0.0-rc.5@element-ui/lib/theme-default/i......
  • vue项目中定义全局变量、全局函数
    在vue项目中,我们经常会遇到要在多个页面组件中都要使用的一个变量或者函数,比如说需要配置的ip地址,在生产环境和测试环境不一样就需要修改。因此我们可以定义一个全局变量来......