前端架构vue动态组件使用基础教程
1、基本使用
新建组件 Article.vue
<template> <div> <p>黄州东南三十里为沙湖,亦曰螺师店。予买田其间,因往相田得疾。</p> <p>闻麻桥人庞安常善医而聋。遂往求疗。</p> <p>安常虽聋,而颖悟绝人,以纸画字,书不数字,辄深了人意。</p> <p>余戏之曰:“余以手为口,君以眼为耳,皆一时异人也。”</p> <p>疾愈,与之同游清泉寺。</p> <p>寺在蕲水郭门外二里许,有王逸少洗笔泉,水极甘,下临兰溪,溪水西流。</p> <p>余作歌云:“山下兰芽短浸溪,松间沙路净无泥,萧萧暮雨子规啼。</p> <p>谁道人生无再少?君看流水尚能西,休将白发唱黄鸡。”</p> <p>是日剧饮而归。</p> </div> </template>
新建组件 Poetry.vue
<template> <div> <p>春宵</p> <p>苏轼 </p> <p>春宵一刻值千金,花有清香月有阴。</p> <p>歌管楼台声细细,秋千院落夜沉沉。</p> </div> </template>
新建 Learn.vue
并在 Learn.vue 中引入 Article.vue 和 Poetry.vue
本文中 Learn.vue 、Article.vue、Poetry.vue 在同一文件夹下
<template> <div> <component :is="currentComponent"></component> <button @click="changeComponent">修改组件</button> </div> </template> <script> import Article from './Article.vue' import Poetry from './Poetry.vue' export default { components: { Article, Poetry }, data() { return { currentComponent: 'Article' } }, methods: { changeComponent() { this.currentComponent = 'Poetry' } } } </script>
动态组件,即使用 component 标签,通过 is 属性指定的名称来切换不同的组件
运行效果
2、配合 keep-alive 使用
keep-alive 可以保持这些组件的状态,如果需要保持组件的状态,则需要配合 keep-alive 一起使用
先看需要保持状态,而不使用 keep-alive 的情况
新建 Manuscript.vue
<template> <div> <form action=""> <input type="text" name="title" /> <br> <input type="text" name="content" /> </form> </div> </template>
修改 Learn.vue
<template> <div> <component :is="currentComponent"></component> <button @click="changeComponent(1)">诗歌</button> <button @click="changeComponent(2)">稿件</button> </div> </template> <script> import Poetry from './Poetry.vue' import Manuscript from './Manuscript.vue' export default { components: { Poetry, Manuscript }, data() { return { currentComponent: 'Poetry' } }, methods: { changeComponent(type) { if(type == 1) { this.currentComponent = 'Poetry' } if(type == 2) { this.currentComponent = 'Manuscript' } } } } </script>
运行效果
看运行效果,会发现在 稿件 中输入文字后,切回到 诗歌,再回到 稿件,之前的 稿件 信息就不见了
出现这个情况的原因是,每次切换新组件的时候,Vue 都创建了一个新的组件。因此,如果需要保存原来的组件信息,要配合 keep-alive 使用
添加 keep-alive 后的 Learn.vue
使用 <keep-alive>
标签将动态组件包裹起来
<template> <div> <keep-alive> <component :is="currentComponent"></component> </keep-alive> <button @click="changeComponent(1)">诗歌</button> <button @click="changeComponent(2)">稿件</button> </div> </template> <script> import Poetry from './Poetry.vue' import Manuscript from './Manuscript.vue' export default { components: { Poetry, Manuscript }, data() { return { currentComponent: 'Poetry' } }, methods: { changeComponent(type) { if(type == 1) { this.currentComponent = 'Poetry' } if(type == 2) { this.currentComponent = 'Manuscript' } } } } </script>
运行效果
以上就是前端架构vue动态组件使用基础教程的详细内容,更多关于前端架构vue动态组件教程的资料请关注猪先飞其它相关文章!
原文出处:https://blog.csdn.net/wsjzzcbq/article/details/122958296
相关文章
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一说绘制红衣喝酒男水粉画效果的教程,各位想知道具体绘制步骤的使用者,那么下面就快来跟着小编一起看一看教程...2016-09-14
iPhone6怎么激活?两种苹果iPhone6激活教程图文详解
iPhone6新机需要激活后才可以正常使用,那么对于小白用户来说,iPhone6如何激活使用呢?针对此问题,本文就为大家分别介绍Wifi无线网络激活以及iPhone6连接电脑激活这两种有效的方法,希望本文能够帮助到大家...2022-09-14- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说下制作雨中野外孤独行走的一头牛海报的教程,各位想知道具体制作方法的使用者们,大家就快来看一看小编给...2016-09-14
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一下绘制帅气卡通魔法王子漫画的具体教程,各位想知道绘制步骤的使用者,那么下面就快来跟着小编一起看一看教程...2016-09-14
- 今天小编在这里就来给各位Illustrator的这一款软件的使用者们来说说鼠绘堆雪人的孩童矢量插画的教程,各位想知道具体绘制方法的使用者们,那么各位就快来跟着小编来看看...2016-09-14
- 支付宝支付在国内算是大家了,我们到处都可以使用支付宝了,下文整理介绍的是在安卓app应用中使用支付宝进行支付的开发例子。 之前讲了一篇博客关与支付宝集成获取...2016-09-20
- 今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下究竟该怎么给照片天空加蓝天白云的教程,各位想知道具体制作步骤的,那么下面就来跟着小编一起看看吧。 ...2016-09-14
- 今天小编在这里就来给llustrator的这一款软件的使用者们来说一说绘制扁平化风格卡通警察护士空姐肖像的教程,各位想知道具体绘制步骤的使用者们,那么下面就快来跟着小编...2016-09-14
- 今天小编在这里就来给Illustrator的这一款软件的使用者们来说一下绘制一个方形的录音机图标的教程,各位想知道具体绘制方法的使用者们,那么下面就来看一下小编给大家分...2016-09-14
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说一说简单制作一个搞笑的换脸表情包的教程,各位想知道具体制作方法的使用者们,那么大家就快来看一看教程吧。...2016-09-14
- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说说给手绘画调色变换场景的后期教程,各位想知道具体后期处理步骤的使用者们,那么大家就快来跟着小编来看...2016-10-02
- 今天小编在这里就来给美图秀秀的这一款软件的使用者们来说一下让你胸丰满起来的处理教程,各位想知道具体处理步骤的,那么下面就快来跟着小编一起看一下教程吧。 给...2016-09-14
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一下绘制雷神传插画的教程,各位想知道具体绘制步骤的使用者,那么下面就快来跟着小编一起看看绘制方法吧。 ...2016-09-14
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28