11.动态组件
2022/1/27 23:34:25
本文主要是介绍11.动态组件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
动态组件
实现动态组件渲染
vue提供给一个内置的component组件,专门用来实现动态组件的渲染
//通过 is 属性,动态指定要渲染的组件 <component :is="comName"></component> //点击按钮,动态切换组件的名称 <button @click="comName = 'Left'">展示 Left 组件</button> <button @click="comName = 'Right'">展示 Right 组件</button> data() { return { //当前要渲染的组件名称 comName: 'left' } }
component标签为vue内置,作用为组件的占位符
is属性的值表示要渲染的组件的名称
is属性的值,应该是组件在components节点下的注册名称
keep-alive
通过component标签动态渲染的组件,在切换时会进行销毁,当切换回来时才重新创建
因此其中的数据并不会保留
此时可以通过keep-alive标签包过进行缓存,保证组件不被销毁
<keep-alive> <component :is="comName"></component> </keep-alive>
默认在keep-alive标签内包裹的所有组件都不会销毁
可以通过添加属性进行修改
include
include属性用来指定只有名称匹配的组件会被缓存,多个组件名之间使用英文逗号分隔
<keep-alive include="MyLeft"> <!-- 此时include中的值为名称匹配的组件, 当组件export default中没有name属性时include的值为组件注册时的名称, 当组件export default中有name属性时include的值就必须为name属性的值 --> <component :is="comName"></component> </keep-alive>
此时只有include中的组件才会被缓存,其他按默认进行销毁创建
exclude
exclude属性用来指定哪些组件不需要被缓存,多个组件名之间使用英文逗号分隔
<keep-alive exclude="MyRight"> <!-- 此时exclude中的值为名称匹配的组件, 当组件export default中没有name属性时exclude的值为组件注册时的名称, 当组件export default中有name属性时exclude的值就必须为name属性的值 --> <component :is="comName"></component> </keep-alive>
此时只有exclude中的组件不会被缓存,其他按默认进行缓存
注: include与exclude这两个属性不能同时使用
keep-alive对应的生命周期函数
keep-alive会对组件进行缓存及激活,同样具有生命周期函数
当组件被缓存时,会自动触发组件的deactivated生命周期函数
当组件被激活时,会自动触发组件的activated生命周期函数
这篇关于11.动态组件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?