Vue 组件4 动态组件

时间:2023-12-23 16:52:14

动态组件

通过使用保留的<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 构建,一流的异步支持。