vue3.0动态组件,vue 前端组件
本文主要介绍前端架构vue动态组件使用的基础教程。有需要的朋友可以借鉴一下，希望能有所帮助。祝大家进步很大，早日升职加薪。
:
目录
1.基本使用2。与keep-alive一起使用。
1、基本使用
创建新的组件Article.vue
模板
差异
p黄州东南三十里是胡莎湖，也叫罗氏店。在购买农田期间，我因去田翔而生病。/p
庞安，P马桥人，常善医却耳聋。然后寻求治疗。/p
安昌虽然聋了，但是聪明开明。他在纸上画字，他的书没有数字，让人感觉很好。/p
p于说：“我以手为口，你以眼为耳。都是一时。”/p
p病愈，与他同游清泉寺。/p
p寺在祁水国城门外两里。有王毅的洗笔喷泉。水极甘，面朝兰溪，溪水西流。/p
余作格曰：“山下青芽浸溪，松间沙路净浑，暮雨嗥叫。/p
p，谁说人生什么都不缺？看流水，不唱白毛黄鸡。"/p
p是日剧。/p
/div
/模板
创建新的组件Poetry.vue
模板
差异
P /p春之夜
p苏轼/p
p一个春夜值千金，花香月阴。/p
p-唱歌管的声音还好，晚上秋千院子重。/p
/div
/模板
创建新的Learn.vue
并将Article.vue和Poetry.vue引入Learn.vue
在本文中，Learn.vue、Article.vue和Poetry.vue在同一个文件夹中。
模板
差异
组件：is= current component /组件
Button @click=changeComponent 修改组件/按钮
/div
/模板
脚本
从导入文章。/Article.vue
从导入诗歌。/poem . vue
导出默认值{
组件：{
文章，
诗意
},
data() {
返回{
当前组件：“文章”
}
},
方法：{
changeComponent() {
this . current component= poem
}
}
}
/脚本
动态组件，即使用component标签，通过is属性指定的名称来切换不同的组件。
操作效果
2、配合keep-alive 使用
Keep-alive可以保持这些组件的状态。如果你需要保持组件的状态，你需要使用keep-alive。
先看看需要保持状态的情况，而不是用keep-alive。
创建新的文稿。vue
模板
差异
表单操作=
输入类型=text name=title /
英国铁路公司
输入类型=text name=content /
/表单
/div
/模板
修改Learn.vue
模板
差异
组件：is= current component /组件
button @ click= change component(1)诗歌/按钮
button @ click= change component(2)手稿/按钮
/div
/模板
脚本
从导入诗歌。/poem . vue
从导入手稿。/手稿. vue
导出默认值{
组件：{
诗歌，
原稿
},
data() {
返回{
当前组件：“诗歌”
}
},
方法：{
更改组件(类型){
if(type==1) {
this . current component= poem
}
if(type==2) {
this.currentComponent=手稿
}
}
}
}
/脚本
操作效果
看运行效果，你会发现，在稿件中输入文字，切回诗歌，再返回稿件，之前的稿件信息就会消失。
原因是每次切换新组件时，Vue都会创建一个新组件。因此，如果需要保存原始组件信息，应该使用keep-alive。
添加keep-alive后的Learn.vue
用keep-alive标签包裹动态部件。
模板
差异
点火电极
组件：is= current component /组件
/保持活力
button @ click= change component(1)诗歌/按钮
button @ click= change component(2)手稿/按钮
/div
/模板
脚本
从导入诗歌。/poem . vue
从导入手稿。/手稿. vue
导出默认值{
组件：{
诗歌，
原稿
},
data() {
返回{
当前组件："诗歌"
}
},
方法：{
更改组件（类型){
if(type==1) {
这个。当前组件=诗歌
}
if(type==2) {
this.currentComponent=手稿
}
}
}
}
/脚本
运行效果
以上就是前端架构某视频剪辑软件动态组件使用基础教程的详细内容，更多关于前端架构某视频剪辑软件动态组件教程的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。