[Vue] 動態組件&異步組件

動態組件

<component v-bind:is="currentTabComponent"></component>

• 在切換component時, 預設會重新渲染DOM
• <keep-alive></keep-alive> 可以不用重新渲染DOM

<keep-alive>

    <component v-bind:is="currentTabComponent"></component>

</keep-alive> 

異步組件

• 在非同步, 有條件的情境下, 載入組件

Vue.component('function1', function (resolve, reject) {

    setTimeout(() => {

        resolve({

            template: `

            <div>        

                <counter></counter>

                <counter></counter>

            </div>`

        })

    }, 3000);

})

延伸關鍵字 webpack + async vue component

source code