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
使用 <keep-alive>
标签将动态组件包裹起来
运行效果
以上就是前端架构vue动态组件使用基础教程的详细内容,更多关于前端架构vue动态组件教程的资料请关注www.887551.com其它相关文章!
黄山市民网:https://www.huangshanshimin.com/