Vue 组件4 动态组件
动态组件
通过使用保留的<component>元素,动态的绑定到它的is特性,我们让多个组件同时使用同一个挂载点,并动态切换:
var Home = {
template: '<p>Welcome home!</p>'
}
var vm = new Vue({
el: '#example',
data: {
currentView: Home
}
})
|
keep-alive
如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以重新添加一个keep-alive指令参数:
v-bind
和 v-on
的简写语法,模板的缩进清楚且简洁:
<my-component
:foo="baz"
:bar="qux"
@event-a="doThis"
@event-b="doThat"
>
<img slot="icon" src="...">
<p slot="main-text">Hello!</p>
</my-component>
|
子组件索引
尽管有props和events,但是有时仍然需要在javascript中直接访问子组件,为此可以使用ref为子组件指定一个索引id,例如:
Promise
resolve 函数:Vue 组件4 动态组件的更多相关文章
- Vue.js的动态组件模板
组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么.评论 ...
- Vue两种组件类型介绍:递归组件和动态组件
一递归组件 递归组件的特性就是可以在自己的template模板中调用自己本身.值得注意的它必须设置name属性. // 递归组件 recursive.vue <template> < ...
- [Vue]组件——实现动态组件:keep-alive的使用
1.在app.vue中用一个 <keep-alive> 元素将其动态组件包裹起来: keepAlive为true时,第一次被创建的时候缓存下来,为false时,不会缓存 <keep- ...
- Vue组件的操作-自定义组件,动态组件,递归组件
作者 | Jeskson 来源 | 达达前端小酒馆 v-model双向绑定 创建双向数据绑定,v-model指令用来在input,select,checkbox,radio等表单控件.v-model指 ...
- Vue.js的组件(slot/动态组件等)、单文件组件、递归组件使用
一.组件 1> 组件命名方式有两种(注意:在DOM模板中只有kebab-case命名方法才生效): html中引用组件: <!-- 在DOM模板中,只有 kebab-case命名才生效 - ...
- Vue基础之 动态组件
为什么会有动态组件> vue 通过组件机制 实现的页面功能的模块化处理,通常情况下 我们在vue中使用组件 就是先定义组件 然后再需要的地方 插入组件即可 但是在某些情况下 需要根据不同的需求 ...
- Vue_(组件通讯)动态组件结合keep-alive
keep-alive 传送门 <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive ...
- Vue_(组件通讯)动态组件
动态组件 传送门 在一个元素上挂载多个组件,根据不同状态进行切换的时候,可以使用动态组件 动态组件的使用:需要使用内置组件<component></component>,根据 ...
- Hibernate学习---第五节:普通组件和动态组件
一.普通组件映射配置 1.创建组件类,代码如下: package learn.hibernate.bean; /** * 组件类 */ public class Phones { private St ...
随机推荐
- 【bzoj1455】【罗马游戏】左偏树+并查集(模板)
Description 罗马皇帝很喜欢玩杀人游戏. 他的军队里面有n个人,每个人都是一个独立的团.最近举行了一次平面几何测试,每个人都得到了一个分数. 皇帝很喜欢平面几何,他对那些得分很低的人嗤之以鼻 ...
- 1.5 JSP标准标签库(JSTL)(核心标签 out、set、remove、if、choose、forEach、forTokens、redirect)
JSTL(JavaServer Page Standard Tag Library):JSP标准标签库.它封装了JSP应用的通用核心功能. 1.准备工作 使用JSTL前需要下载所需文件,下载地址及安 ...
- 你真的懂ThreadPoolExecutor线程池技术吗?看了源码你会有全新的认识
Java是一门多线程的语言,基本上生产环境的Java项目都离不开多线程.而线程则是其中最重要的系统资源之一,如果这个资源利用得不好,很容易导致程序低效率,甚至是出问题. 有以下场景,有个电话拨打系统, ...
- Problem I: 打印金字塔
#include<stdio.h> int main() { int n,i,j,k; scanf("%d",&n); ;i<=n;i++) { ;j&l ...
- linux下安装python2.7.5和MYSQLdb
由于开发的python web 扫描器需要在python2.7.5以及需要MYSQLdb这个库的支持,在此做一个记录,避免更换到新环境时的学习成本. 一.安装MYSQL 1.yum install m ...
- IIS 7 网站权限问题
IIS7 应用程序池[标识]为[ApplicationPoolIdentity] 给程序目录赋权限: IUSER IIS AppPool\[应用程序池名]
- sqlserver 获取系统用户表结构信息
SELECT (case when a.colorder=1 then d.name else null end) 表名, a.colorder 字段序号,a.name 字段名, (case when ...
- WebLogic Cluster Sevlet的配置
虽然生产环境中不建议使用,但因为客户需要考试可能用到,所以又做了一遍 1. 配置受管Server,ProxyServer,过程略 2.构建Proxy Application 建立一个ProxyApp的 ...
- linux:使用comm命令比较两个文件:交集、差
linux:使用comm命令比较两个文件:交集.差 comm命令可以按行比较两个排序好的文件,输出有3列:第一列是file1独有的.第二列是file2独有的,第三列是两者都有的,简单语法如下:NAME ...
- OpenStack手动制作CentOS 7 KVM镜像
在前面讲解KVM的时候,我们已经学习了如何制作KVM镜像,那么制作OpenStack使用的镜像和KVM是有一些区别的. 1. 下载CentOS 7官方ISO安装镜像这里使用国内阿里云的镜像源进行 ...