动态组件

通过使用保留的<component>元素,动态的绑定到它的is特性,我们让多个组件同时使用同一个挂载点,并动态切换:

var vm = new Vue({
el: '#example',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})
<component v-bind:is="currentView">
<!-- 组件在 vm.currentview 变化时改变! -->
</component>
也可以直接绑定到组件对象上:
var Home = {
template: '<p>Welcome home!</p>'
}
 
var vm = new Vue({
el: '#example',
data: {
currentView: Home
}
})

keep-alive

如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以重新添加一个keep-alive指令参数:

<keep-alive>
<component :is="currentView">
<!-- 非活动组件将被缓存! -->
</component>
</keep-alive>
杂项
编写可复用组件
在编写组件时,留意是否要复用组件是有好处的。一次性组件跟其他组件紧密耦合是没关系的。
但是可复用组件应当定义一个清晰的公开接口。
Vue组件的API来自三部分:props ,events和slots:
1.props允许外部环境传递数据给组件。
2.events允许从外部环境在组件内触发副作用。
3.slots允许外部环境将额外的内容组合在组件中。
使用 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,例如:

<div id="parent">
<user-profile ref="profile"></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile
当ref和v-for一起使用时,ref是一个数组,包含相应的子组件。
注:$refs只在组件渲染完成后才填充,并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案--应当避免在模板或计算属性中使用$refs.
异步组件
在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载。为了让事情更简单,Vue.js允许将组件定义为一个工厂函数,动态的解析组件的定义。Vue.js只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染。例如:
Vue.component('async-example',function(reslove,reject){
setTimeout(function(){
resolve({
template:'<div>I'm async!</div>'
})
},1000);
})
工厂函数接收一个reslove回调,在收到从服务器下载的组件定义时调用。也可以调用reject(reason)指示加载失败。这里setTimeout只是为了演示。怎么获取组件完全由你决定。推荐配合使用 :Webpack 的代码分割功能
Vue.component('async-webpack-example', function (resolve) {
// 这个特殊的 require 语法告诉 webpack
// 自动将编译后的代码分割成不同的块,
// 这些块将通过 Ajax 请求自动下载。
require(['./my-async-component'], resolve)
})
 
你可以使用 Webpack 2 + ES2015 的语法返回一个 Promise resolve 函数:
Vue.component(
'async-webpack-example',
() => import('./my-async-component')
)
当使用局部注册时,你也可以直接提供一个返回promise 函数。
new Vue({
// ...
components: {
'my-component': () => import('./my-async-component')
}
})
如果你是Browserify用户,可能就无法使用异步组件了,它的作者已经表明Browserify是不支持异步加载的。Browserify社区发现一些解决方法,可能有助于已存在的复杂应用。对于其他场景,我们推荐简单实用 Webpack 构建,一流的异步支持。
 
 

Vue 组件4 动态组件的更多相关文章

  1. Vue.js的动态组件模板

    组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么.评论 ...

  2. Vue两种组件类型介绍:递归组件和动态组件

    一递归组件 递归组件的特性就是可以在自己的template模板中调用自己本身.值得注意的它必须设置name属性. // 递归组件 recursive.vue <template> < ...

  3. [Vue]组件——实现动态组件:keep-alive的使用

    1.在app.vue中用一个 <keep-alive> 元素将其动态组件包裹起来: keepAlive为true时,第一次被创建的时候缓存下来,为false时,不会缓存 <keep- ...

  4. Vue组件的操作-自定义组件,动态组件,递归组件

    作者 | Jeskson 来源 | 达达前端小酒馆 v-model双向绑定 创建双向数据绑定,v-model指令用来在input,select,checkbox,radio等表单控件.v-model指 ...

  5. Vue.js的组件(slot/动态组件等)、单文件组件、递归组件使用

    一.组件 1> 组件命名方式有两种(注意:在DOM模板中只有kebab-case命名方法才生效): html中引用组件: <!-- 在DOM模板中,只有 kebab-case命名才生效 - ...

  6. Vue基础之 动态组件

    为什么会有动态组件> vue 通过组件机制 实现的页面功能的模块化处理,通常情况下 我们在vue中使用组件  就是先定义组件 然后再需要的地方 插入组件即可 但是在某些情况下 需要根据不同的需求 ...

  7. Vue_(组件通讯)动态组件结合keep-alive

    keep-alive 传送门 <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive ...

  8. Vue_(组件通讯)动态组件

    动态组件 传送门 在一个元素上挂载多个组件,根据不同状态进行切换的时候,可以使用动态组件 动态组件的使用:需要使用内置组件<component></component>,根据 ...

  9. Hibernate学习---第五节:普通组件和动态组件

    一.普通组件映射配置 1.创建组件类,代码如下: package learn.hibernate.bean; /** * 组件类 */ public class Phones { private St ...

随机推荐

  1. 【bzoj1455】【罗马游戏】左偏树+并查集(模板)

    Description 罗马皇帝很喜欢玩杀人游戏. 他的军队里面有n个人,每个人都是一个独立的团.最近举行了一次平面几何测试,每个人都得到了一个分数. 皇帝很喜欢平面几何,他对那些得分很低的人嗤之以鼻 ...

  2. 1.5 JSP标准标签库(JSTL)(核心标签 out、set、remove、if、choose、forEach、forTokens、redirect)

    JSTL(JavaServer Page Standard Tag  Library):JSP标准标签库.它封装了JSP应用的通用核心功能. 1.准备工作 使用JSTL前需要下载所需文件,下载地址及安 ...

  3. 你真的懂ThreadPoolExecutor线程池技术吗?看了源码你会有全新的认识

    Java是一门多线程的语言,基本上生产环境的Java项目都离不开多线程.而线程则是其中最重要的系统资源之一,如果这个资源利用得不好,很容易导致程序低效率,甚至是出问题. 有以下场景,有个电话拨打系统, ...

  4. Problem I: 打印金字塔

    #include<stdio.h> int main() { int n,i,j,k; scanf("%d",&n); ;i<=n;i++) { ;j&l ...

  5. linux下安装python2.7.5和MYSQLdb

    由于开发的python web 扫描器需要在python2.7.5以及需要MYSQLdb这个库的支持,在此做一个记录,避免更换到新环境时的学习成本. 一.安装MYSQL 1.yum install m ...

  6. IIS 7 网站权限问题

    IIS7 应用程序池[标识]为[ApplicationPoolIdentity] 给程序目录赋权限: IUSER IIS AppPool\[应用程序池名]

  7. sqlserver 获取系统用户表结构信息

    SELECT (case when a.colorder=1 then d.name else null end) 表名, a.colorder 字段序号,a.name 字段名, (case when ...

  8. WebLogic Cluster Sevlet的配置

    虽然生产环境中不建议使用,但因为客户需要考试可能用到,所以又做了一遍 1. 配置受管Server,ProxyServer,过程略 2.构建Proxy Application 建立一个ProxyApp的 ...

  9. linux:使用comm命令比较两个文件:交集、差

    linux:使用comm命令比较两个文件:交集.差 comm命令可以按行比较两个排序好的文件,输出有3列:第一列是file1独有的.第二列是file2独有的,第三列是两者都有的,简单语法如下:NAME ...

  10. OpenStack手动制作CentOS 7 KVM镜像

    在前面讲解KVM的时候,我们已经学习了如何制作KVM镜像,那么制作OpenStack使用的镜像和KVM是有一些区别的. 1.    下载CentOS 7官方ISO安装镜像这里使用国内阿里云的镜像源进行 ...