前端架构vue动态组件使用基础教程

目录

• 1、基本使用
• 2、配合 keep-alive使用

1、基本使用

新建组件 Article.vue

新建组件 Poetry.vue

新建 Learn.vue

并在 Learn.vue 中引入 Article.vue 和 Poetry.vue

本文中 Learn.vue 、Article.vue、Poetry.vue 在同一文件夹下

动态组件，即使用 component 标签，通过 is 属性指定的名称来切换不同的组件

运行效果

2、配合 keep-alive 使用

keep-alive 可以保持这些组件的状态，如果需要保持组件的状态，则需要配合 keep-alive 一起使用

先看需要保持状态，而不使用 keep-alive 的情况

新建 Manuscript.vue

修改 Learn.vue

运行效果

 看运行效果，会发现在 稿件 中输入文字后，切回到 诗歌，再回到 稿件，之前的 稿件 信息就不见了

出现这个情况的原因是，每次切换新组件的时候，Vue 都创建了一个新的组件。因此，如果需要保存原来的组件信息，要配合 keep-alive 使用

添加 keep-alive 后的 Learn.vue

使用  标签将动态组件包裹起来

运行效果

以上就是前端架构vue动态组件使用基础教程的详细内容，更多关于前端架构vue动态组件教程的资料请关注脚本之家其它相关文章！