vue 动态组件使用教程
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 动态组件组件复用_真正的动态声明性组件
vue 动态组件组件复用 在这篇简短的文章中,我将重点介绍ADF动态声明性组件. 我的意思是一个众所周知的ADF标签af:declarativeComponent . 它可以用作将页面设计为页面片段和 ...
- vue ---- 动态组件
动态切换组件的显示隐藏 component 如何实现动态组件渲染 vue提供了一个内置的<component>,专门用来实现动态组件的渲染. 这个标签就相当于一个占位符,需要使用is属性指 ...
- Vue动态组件、组件缓存、组件激活和非激活、组件插槽、组件name
一.动态组件 如何切换2个组件 互斥的显示或者隐藏呢 除了v-if 什么是动态组件? 多个组件使用同一个挂载点,并动态切换.这就是动态组件 完成一个注册功能页面, 2个按钮切换, 一个填写注册信息, ...
- vue动态组件的实现和传值
动态组件的实现和传值 1.动态组件的实现 动态组件是使用 component 组件,通过一个特殊的attribute is 来实现 <template><div><but ...
- Vue动态组件 异步组件 keep-alive
动态组件指的是动态切换组件的显示与隐藏 每次进行组件间的切换时,Vue都创建了一个新的组件实例,同时存在销毁过程 为了避免过程一每次进行销毁重建的问题,那么可以通过 keep-alive 来处理 &l ...
- Vue动态组件和组件缓存
一.切换组件案例 比如我们现在想要实现了一个功能: 点击一个tab-bar,切换不同的组件显示: 这个案例我们可以通过两种不同的实现思路来实现: 方式一:通过v-if来判断,显示不同的组件: 方式二: ...
- vue动态组件is详解
tab动态切换三个组件 方法一可以使用v-if做一个隐藏显示 方法二用元素的 is 的特性 <component :is="currentView" class=" ...
- router vue 动态改变url_Vue教程(路由router-基本使用)
本文开始我们来给大家介绍在Vue中非常重要的一个内容,就是路由Router 什么是路由 后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源: 前端路由:对于 ...
- vue 动态组件名_vue动态加载组件mounted无法获取dom的解决思路
有时我们在mouted方法中想通过id读取到一个dom元素,虽然官方并不推荐这种方法来操作dom.但难免有碰到这种情况,如下面 一个dom元素 试图在mouted中获取 试图在nextick中获取 结 ...
最新文章
- sklearn 相关性分析_人工智能和大数据的骨架支点—— 机器学习之相关性分析
- asp.net core 实现支持多语言
- 『软件工程4』一文了解软件项目管理中的4P
- 如何在MaxCompute中利用bitmap进行数据处理?
- C#LeetCode刷题之#933-最近的请求次数(Number of Recent Calls)
- Android应用程序组件
- WCF 第五章 导出并发布元数据(服务行为)
- hbase 协处理器 部署_hbase协处理器概念及知识点总结
- 中兴8912交换机show run故障处理
- python 读取excel太慢_实用技巧——Python实现从Excel读取数据并绘制成图像
- 双击 计算机 网络打不开,windows7系统双击“双击计算机”打不开怎么回事
- 汉化破解:Restorator辅助绕过注册码
- 镁光硬盘测试软件,镁光固态硬盘评测
- 2020年日历电子版(打印版)_2020全年共12个月的日历表打印版可图片年历-2020年日历A4打印版(每月一张-横版-完美版)下载Word带节假日农历电子版-西西软件下载...
- java security md5_java自带的加密--java.security.MessageDigest(md5加密)
- WebRTC技术详解
- img 图片加载设置超时
- 此计算机到未能识别网络连接,Win10未识别的网络无法连接到internet如何解决?操作方法...
- Vscode 文件中 查找替换局部查找替换快捷键
- 海尔电视显示连接不上服务器,海尔电视怎么连接手机