vue组件---动态组件&异步组件
2023-09-11 14:19:07 时间
(1)在动态组件上使用keep-alive
之前曾经在一个多标签的界面中使用 is
特性来切换不同的组件。接下来简单回顾下
<component>元素是vue 里面的一个内置组件。在里面使用 v-bind: is,可以实现动态组件的效果。
<!-- 1、动态组件 --> <div class="tab_area"> <button v-for="tab in tabs" v-on:click="currentTab = tab">{{tab}}</button> <component v-bind:is="currentTabComponent"></component> </div> <!-- 1、动态组件 --> <script type="text/javascript"> /* 1、动态组件 */ Vue.component('tab-home',{ template:"<div>Home主页展示信息</div>" }); Vue.component('tab-info',{ template:"<div>info信心页展示信息</div>" }); Vue.component('tab-location',{ template:"<div>location位置展示信息</div>" }); new Vue({ el:".tab_area", data:{ currentTab:'home', tabs:['home','info','location'] }, computed:{ currentTabComponent:function(){ return 'tab-'+this.currentTab; } } }) /* 1、动态组件 */ </script>
结果:点击按钮时完成切换
当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。例如我们来展开说一说这个多标签界面:
代码由于篇幅问题放到下篇文章vue组件---动态组件之多标签页面里。
你会注意到,如果你选择了一篇文章,切换到 Archive 标签,然后再切换回 Posts,是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候,Vue 都创建了一个新的 currentTabComponent
实例。重新创建动态组件的行为通常是非常有用的,但是在这个案例中,我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题,我们可以用一个 <keep-alive>
元素将其动态组件包裹起来。
<!-- 失活的组件将会被缓存!--> <keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive>
注意:需要将其放到父组件模板中。
注意:这个 <keep-alive>
要求被切换到的组件都有自己的名字,不论是通过组件的 name
选项还是局部/全局注册。
(2)异步组件(待验证--暂不介绍讲解)
.
相关文章
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- Unity3D研究院之动态修改烘培贴图的大小&脚本烘培场景
- Vue -> 解决 vue-ueditor-wrap 不能显示的问题
- Java 容器 & 泛型:六、容器讲到为什么要使用泛型
- [HTML 5] stopPropagation & stopImmediatePropagation
- [Vue @Component] Pass Props Between Components with Vue Slot Scope & renderless component
- [Vue @Component] Simplify Vue Components with vue-class-component
- [Vue] Get up and running with vue-router
- 对话框--pop&dialog总结
- nohup和&后台运行,进程查看及终止
- [Vue] Get up and running with vue-router
- [Servlet&JSP] 使用JDBC连接数据库
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- Vue入门教程:node安装vue命令行工具及启动项目
- error C2146: syntax error : missing ';' before identifier 'PVOID64'
- standalone vue initialization process - Vue应用的初始化过程
- 华为OD机试 - 用户调度问题(Java & JS & Python)
- vue-router路由的安装、配置、具体用法和Vue-router学习笔记
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- libxml2.so: undefined reference to `gzopen64'
- 【大数据&AI人工智能】图数据库的发展脉络与技术演进
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- URAL 1727. Znaika's Magic Numbers(数学 vector)
- Vue中vue-i18n结合element-ui实现国际化
- 同步、更新、下载Android Source & SDK from 国内镜像站
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- Vue(二)vue 指令及用法举例