Vue 组件4 动态组件
动态组件
通过使用保留的<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 动态组件 的全部内容， 来源链接： utcz.com/z/376257.html
