Vue 组件4 动态组件
2024-10-19 17:30:00
动态组件
通过使用保留的<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 构建,一流的异步支持。
最新文章
- iOS导航栏标题颜色
- jquery实现淡入淡出
- DOM何时Ready
- scala中的下划线_
- 【bzoj1052】覆盖问题
- phpStudy 2016 更新下载,新版支持php7.0
- Codeforces Round #327 div2
- 数据库 - FMDB
- linux上svn连接visual svn server时ssl鉴权失败,问题解决(转)
- 最新FFMPEG解码流程
- 内核对象kobject和sysfs(2)——kref分析
- openvpn 客户端一键脚本安装
- HTTP引流神器Goreplay详解【官译】
- ASP.NET Core 2.2 十八.各种Filter的内部处理机制及执行顺序
- nodejs之connect
- Elasticsearch 5.4.3实战--环境搭建
- windows环境安装MySQL
- iOS字体大小
- java中线程池的使用
- ASP.Net Core 2.2 MVC入门到基本使用系列 (二)
热门文章
- Bootstrap-table自定义可编辑每页显示记录数
- jQuery判断一个元素是否为另一个元素的子元素
- NHibernate官方文档中文版--只读实体类型(Read-only entities)
- 我的vim配置---jeffy-vim-v2.1.tar
- javascript中常见的函数封装 :判断是否是手机,判断是否是微信,获取url地址?后面的具体参数值,毫秒格式化时间,手机端px、rem尺寸转换等
- [Android Memory] 怎样使一个Android应用不被杀死
- 打补丁以及WebLogic Server的版本
- Shell实现多级菜单系统安装维护脚本实例分享
- centos6.9安装xampp后报错:egrep: error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory
- opengl中VAO,VBO,IBO用法小结(zz) 【转】