#vue #vue2

动态组件和异步组件

动态组件dynamic component

<keep-alive>
<component is="testComponent"></component>
</keep-alive>

异步组件async component

webpackbuild出来会有多个包

写法一，配合webpack code splitting写法

Vue.component('async-component-webpack-demo', function(resolve){
    require(['./async-component-src-path'], resolve)
})

写法二，factory部分，使用一个Promise（通过webpack+es2015语法，直接通过import来返回一个Promise）

Vue.component('async-component-webpack-demo', () => import('async-component-src-path'))

写法三，依然使用写法二的方式获得factory部分。只是不适用Vue.component，使用local registration写法（components字段）

new Vue({
    el: '#app', 
    components: { 'component-a': ComponentA, 'component-b': ComponentB } 
    })