【Vue】组件 - 让动态组件存活

最新推荐文章于 2024-01-05 16:31:26 发布
最新推荐文章于 2024-01-05 16:31:26 发布
阅读量208 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39415598/article/details/93545764
版权
7275569-7763b734a17f4612.jpg
微信订阅号：Rabbit_svip



【Vue】组件 -动态组件

接着上面的例子。

动态组件用<component>标签包着，再加上is属性来判断就能实现。

但动态组件有一个问题（其实也算不上问题），就是每次切换，组件都会重新加载。

先上代码

7275569-d8c005fba5c38874
微信订阅号：Rabbit_svip

效果


7275569-802baf7be136a450.gif
微信订阅号：Rabbit_svip

可以看到，在面板2按了几下按钮，num不断增加。

但切回到面板1，再切回到面板2的时候，会发现num变成0了。

这说明每次切换，组件都重新加载一遍。



如果需要组件存活，需要用一个标签，把动态组件部分包起来。

<keep-alive>
7275569-edd5383e2721cd2b
微信订阅号：Rabbit_svip

只需在html部分加一个简单的标签即可。


7275569-52b8c62e279e4bf9.gif
微信订阅号：Rabbit_svip
德育处主任Pro
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
01-18
前言 最近在做一个精品课程后台管理系统，其中涉及文件上传和文件列表展示，我不想将他们写入一个组件，故分开两个组件实现，但由于上传文件需要时间，这时要是用户切换别的组件查看时，上传文件组件就销毁了，导致文件上传失败，所以需要采取keep-alive技术实现不销毁上传文件组件，同时也由于系统模块较多，所以需要多组件进行嵌套。 问题：多组件嵌套下如何指定对应的一个或多个组件存活呢？ *tips：要是对于Vue使用keep-alive的基本用法不熟悉的也可以点击查看vue使用keep-alive的基本用法 配置路由加以判断是否使用keep-alive MVideoUpload，MFileUpload为
vue--keep-alive保存组件的状态
大小都是愁的成长之路
04-09 2279
概述：动态组件的切换过程中走的改变：切换走了-&gt;会销毁；切回来-&gt;重新构建（渲染）一次；所以组件状态不会保留1.保留组件的状态，用keep-alive（模拟场景注册流程中的下一步下一步） . 把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染 .include - 字符串或正则表达式。只有匹配的组件会被缓存。 .exclude - 字符串或正则表达式。任何匹配的组件都不...
vue的生存周期
weixin_34378045的博客
11-14 46
vue的生存周期 用户会看到花括号编辑 v-cloak v-text v-html 防止闪烁 style{ [v-cloak]:{ display:none; } } 转载于:https://www.cnblogs.com/guoshuli/p/7833326.html...
VUE路由页面的保活机制(移动端可以实现点击后退详情页还在)
weixin_42510405的博客
09-05 1187
VUE路由页面的保活机制(移动端可以实现点击后退详情页还在)
【Vue3基础】组件保持存活、异步加载组件
qq_42294095的博客
08-01 830
保持组件存活keep-alive、异步组件加载defineAsyncComponent
vue keep-alive 动态删除组件缓存的例子
10-16
根据提供的文件信息，以下是关于Vue中keep-alive组件缓存动态删除的知识点详细说明： 首先，什么是Vue中的keep-alive组件呢？keep-alive是Vue提供的一个抽象组件，它主要用于缓存动态组件，避免组件切换过程中导致...
vue组件-自定义滚动条
06-30
vue组件-自定义滚动条
vue-cron_vue-cron_vuecrond组件_vuecron_
10-04
Vue-Cron是一款基于Vue.js开发的时间周期（Cron）表达式组件，用于在前端应用程序中创建、编辑和处理定时任务。Vue-Cron旨在提供一种直观的用户界面，让用户能够通过图形化的方式设置复杂的Cron表达式，从而实现定时...
图片动态绘制组件 vue2.x
07-14
安装 yarn add vue-image-painter # 或 npm i -S vue-image-painter 引入 // main.js 入口中 import ImagePainter from 'vue-image-painter' Vue.use(ImagePainter) 使用，请参考Demo 源码
21.动态组件 component与keep-alive
potato123232的博客
05-06 705
动态组件指的是动态切换组件的显示与隐藏，移动端的tabBar可以使用动态组件来做，点击绿色部分的tabBar，tabBar上方的蓝色部分会进行切换。
vue中的keep-alive
dream_s_a的博客
08-02 547
在k页面根据pageNum请求到该分页的数据进行展示，pageNum的值假设此时为3，去到a页面，点击匹配其他条件又到k页面，此时因为k页面被keep-alive保存状态，有数据缓存，所以显示的还是pageNum=3的分页数据造成页面显示异常；a→k→b→a→k即离开k页面后只要从a页面点击跳转到k页面时，不使用缓存数据，数据应该更新（要注意如果是原来的匹配条件时，缓存需要保存）；试过把pageNum初始化为1的方法，但是当数据量过大时，会先显示数据异常的页面，然后才显示初始化为1的分页数据；...
vue动态组件、保持存活
最新发布
梦寻汝的博客
01-05 497
保持存活：切换组件后，不重新渲染切换的组件，保持切换前（更改文字时）的数据。4、再次切换组件，【组件A的 新数据是更改后的】保持存活；不加eep-alive 则会变回第1张图。
vue keepAlive保持当前状态
qq_38730762的博客
10-13 448
大家在做后台管理系统时候，编辑、详情等页面有时候需要通过路由跳转显示（没有通过子组件显示），这里有的页面需要保存当前状态，有的则不需要 需要保持状态的：数据分页查询，点击详情时，返回需要跳到当前页 不需要保持状态的：更新数据，编辑数据，删除数据（对数据进行操作的时候） 我这里是看别人的写法，我这里直接上干活（详细版本的翻到最下面有原文地址） 1. router.js { path: '/index/table', // 测试用例 组件保持当前状态 国际化时 测试用例
27.VUE组件的状态保持keep-alive
休息休息夏的博客
05-26 930
VUE组件的状态保持keep-alive1. 使用场景：2.使用keep-alive 1. 使用场景：     当有一个页面组件，需要加载和请求较多的数据，页面渲染的内容可能比较复杂，那么这个页面加载完毕的话会花费比较多的时间(如2,3秒左右)。     比如从这个A页面切换到了下一个B页面，就会销毁当前页面组件，渲染新的页面组件。下一次重新切换回加载渲染时间比较多的组件A的时候，又会花费2,3秒钟的时间重新进行渲染和加载；这
vue解决父组件调用子组件只执行一次问题
前端泡面人
08-31 2148
vue解决父组件调用子组件只执行一次问题
Vue中KeepAlive 原理与源码分析
发果叁
10-30 1021
keep-alive组件的作用类似于 HTTP 中的持久链接。它可以避免组件实例不断地被销毁和重建。keep-alive的实现并不复杂。当被keep-alive的组件在卸载的时候，渲染器并不会真的将其卸载，而是会将该组件搬运到一个隐藏的容器中，从而使得组件可以维持当前状态。当被keep-alive的组件再次被 “挂载” 时，渲染器也不会真的挂载它，而是将它从隐藏容器中搬运到原容器。最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。
Vue3 多页面保活/include 失效问题
NEWonclick的博客
08-24 937
因为keep-alive include必须要命名组件，在setup语法糖中无法为组件命名所有只需更改写法。
nodejs进程保活forever
weixin_42333548的博客
06-07 1402
1、客户端启动Node.js应用： node app.js# 方法一 npm run start# 方法二 Express框架 这样可以正常启动应用，但是如果断开客户端连接，应用也就随之停止了。也就是说这样的启动方式没有给应用一个守护线程。 Forever可以解决这个问题！Forever可以守护Node.js应用，客户端断开的情况下，应用也能正常工...
vue keepalive
universe的博客
02-24 274
keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现 App.vue <template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> |
vue3 vue-video-player动态重新加载组件
05-24
import VideoPlayer from 'vue-video-player' export default { components: { VideoPlayer }, data() { return { videoKey: 0, options: { // options here } } }, methods: { reload() { // 在这里...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值