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 构建，一流的异步支持。