vue笔记

Last Updated:

2022-08-12

#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 } 
    })