2021-10-27 vue笔记-组件化开发(五) 动态组件＜component＞和keep-alive

已于 2022-10-16 16:02:51 修改
阅读量369 收藏
点赞数
分类专栏： vue学习笔记 文章标签： vue.js 前端 javascript 组件 动态组件
于 2021-10-27 20:49:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rowlet/article/details/121001780
版权
本文探讨了Vue.js中的动态组件及其应用场景，详细解释了如何通过<component>标签实现组件动态切换，并介绍了keep-alive的作用，即保留组件状态以避免重新渲染。示例代码展示了动态组件的使用方式，同时指出在切换组件时若需保持数据状态，需借助keep-alive来实现。
摘要由CSDN通过智能技术生成
1.动态组件
定义

让多个组件使用同一个挂载点，并动态切换，这就是动态组件。

应用场景

通过使用保留的 元素，动态地绑定到它的 is 特性，可以实现动态组件。
它的应用场景往往应用在路由控制或者 tab 切换中。

标签

<component>元素:动态绑定多个组件到它的js属性
<keep-alive>:保留状态,避免重新渲染

2.示例
代码
<div id="app">
    <component :is="who"></component>
    <footer>
        <ul>
最低0.47元/天 解锁文章
前端OnTheRun
关注
专栏目录
coderwhy前端课堂笔记|vue教程|非父子组件的通信2|动态组件，webpack代码分包，v-model,mixin,合并规则，缓存组件的生命周期,keep-alive,
VAN
04-19 34
 默认情况下，在构建整个组件树的过程中，因为组件和组件之间是通过模块化直接依赖的，那么webpack在打包时就会将组。 所以，对于一些不需要立即使用的组件，我们可以单独对它们进行拆分，拆分成一些小的代码块chunk.js； 如果我们希望绑定更多，可以给v-model传入一个参数，那么这个参数的名称就是我们绑定属性的名称；◼ **如果Mixin对象中的选项和组件对象中的选项发生了冲突，那么Vue会如何操作呢？◼ **那么，为了我们的MyInput组件可以正常的工作，这个组件内的 必须： **
动态组件＜component＞＜/component＞、＜keep-alive＞＜/keep-alive＞
YY的博客
11-25 566
、
Vue 爬坑之路（五）—— 组件进阶
weixin_34241036的博客
02-14 561
组件（Component）是 Vue.js 最强大的功能之一，之前的文章都只是用到了基本的封装功能，这次将介绍一些更强大的扩展。 一、基本用法 在使用 vue-cli 创建的项目中，组件的创建非常方便，只需要新建一个 .vue 文件，然后在 <template> 中写好 HTML 代码，一个简单的组件就完成了 一个完整的组件，除了 <template> 以...
vue 动态组件component
qq_36657291的博客
02-03 3007
vue 动态组件component
vue-动态组件component的is绑定
m0_61486963的博客
05-19 905
动态绑定不能直接写，子组件名字，要在父组件的data中现定义一个变量，在赋值为子组件名 <template> <div id="content"> <keep-alive> <!-- 动态绑定不能直接写，子组件名字，要在父组件的data中现定义一个变量，在赋值为子组件名 --> <component :is='StuManaga'> </component> .
Vue 动态绑定组件
qq_43432157的博客
01-24 1218
Vue 动态绑定组件 <div class="client"> <component :params="showData" :is="currentTabComponent" ref="chart1"></component> </div> <script> import Linedata from '@/components/charts/Linedata.vue' import Histogram from '@/com
vue组件缓存之keep-alive正确使用姿势_keepalive缓存组件
最新发布
m0_46608024的博客
04-18 323
但是但是，我们的项目是用vue开发的webapp,多个组件共用一个窗口，当我们切换路由时，切出路由组件会销毁，所有列表页进入详情页列表页会销毁，重新回到列表页，列表页组件会重新加载。这样需求，如果是小程序的话，默认列表页就会缓存，因为小程序的运行环境是微信客户端，当我们打开一个页面会新建一个webview，所有列表页和详情页是两个webview，当我们进入详情页，列表页webview，只是会在详情页webview下面，不会销毁。从详情页返回，希望列表页缓存，不重新渲染数据，这样会提高用户体验。
2021-12-13 面试(一) v-if/for优先级,toFixed,keep-alive,语义化,vuex,vue双向数据绑定原理,插槽种类和作用
GAARA
12-13 388
文章目录 1.v-if和v-for的优先级 回答 补充 2.`0.1+0.2=0.3000000004` 回答 验证 3.keep-alive 回答 复习 4.语义化的理解 回答 5.vuex是什么?有什么用?使用场景是? 回答 补充 复习 6.`===`和`==`的区别 回答 7.vue 双向数据绑定的原理 回答 补充 8.vue插槽种类和作用 回答 复习 9.es6新增特性(10个以上) 回答: 10.简述封装vue组件的过程 回答 补充 11.vue3都有什么 12.说一下原型链 回答 复习 13.输
Vue 官方笔记--组件
小菜的博客
07-24 2901
中文版(英文浓缩) 组件是什么？ 组件：具有预定义选项的实例 组件是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用 通过 prop ，我们可以实现父子组件之间的解耦，有了属性，子组件中就可以使用更为复杂的模板和逻辑，比如如下 <!-- 复制到 html 中可以直接运行哦，看看是什么结果吧 --> <div id="main"> <ol> <!-- 子组件 --> <todo-item v-for=
vue2动态组件动态绑定事件；component标签动态绑定事件；component组件动态绑定事件
lys20000913的博客
07-04 4459
vue2动态组件动态绑定事件； 组件通过 component动态生成，基于v-bind绑定事件时事件不生效。因为是动态绑定所以不确定会在未来绑定多少事件，所以直接预定绑定n个事件，我预制了六个基本同一个组件也不会超过六个事件了如果在需要就在继续加即可。例如需要绑定 @click 则将 schema.events.a0.name 赋值为 click 并将对应事件函数绑定给 schema.events.a0.fun。存在小问题： 可能 我只需要绑定一个clic ...
vue - vue的动态组件(component)使用
qq_43886365的博客
11-24 4827
vue的动态组件(component)使用
VUE动态组件的使用
sheep206的博客
06-05 1105
VUE动态组件的使用
vue的动态组件和＜keep-alive＞的使用
qq_40639028的博客
09-09 716
1.动态组件<component>可以实现动态组件的切换显示隐藏，但会销毁原组价，进入销毁阶段；<keep-alive>在切换时可以保持原组件不被销毁，被暂时缓存，再切换回原组件，不用在加载，可以提高性能。 2.<component>必须配合is属性使用，is的值就是引入需要加载的组件。<keep-alive>的使用非常简单，之间用<keep-alive>包裹<component>即可实现效果。 demo代码： <!--&
vue内置组件：keep-alive
前端御书房
11-10 1471
KeepAlive 通过缓存管理和特殊的挂载/卸载逻辑以达到减小同一个组件频繁的创建、销毁造成的性能开销的目的。
keep-alive Vue-动态组件怎么使用
技术前端，忠于热爱 @0.活在风浪里
12-06 1118
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
vue的动态组件和异步组件及keep-alive
丑小鸭变黑天鹅的博客
04-07 566
vue的动态组件和异步组件一、动态组件二、keep-alive三、异步组件 一、动态组件 动态组件是使用 component 组件，通过一个特殊的attribute is 来实现 下面通过一个例子去解释动态组件怎么用 如上图所示，比如我们现在想要实现了一个功能：点击一个tab-bar，切换不同的组件显示 这个案例我们可以通过三种不同的实现思路来实现 方式一：通过v-if来判断，显示不同的组件 方式二：动态组件的方式 方式三：使用路由router-link和router-view v-if显
vue动态切换组件component以及keep-alive的运用
qq_59717525的博客
11-12 2231
动态切换组件用<component :is="componentName"> </component> componentName是组件名称 案例代码: <template> <div id="app"> <h2>根组件</h2> <input type="button" value="点击" @click="showComponents"> <hr /> <component :is.
Vue-动态组件
weixin_44152684的博客
05-09 2852
1、component组件 目标: 多个组件使用同一个挂载点，并可以动态切换，这就是动态组件 <template> <div> <button @click="comName = 'UserName'">账号密码填写</button> <button @click="comName = 'UserInfo'">个人信息填写</button> <p>下面显示注册组件:</p>
深入理解Vue keep-alive：动态组件与路由缓存
在`vue-router`中，`keep-alive`通常用于缓存路由组件： ```html <keep-alive :include="whiteList" :exclude="blackList" :max="amount"> <router-view></router-view> </keep-alive> ``` 这里，`whiteList`和`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值