Vue動態(tài)組件與異步組件超詳細講解

更新時間：2023年03月16日 09:17:42 作者：時光劍客

這篇文章主要介紹了Vue動態(tài)組件與異步組件，動態(tài)組件是根據(jù)數(shù)據(jù)的變化，可以隨時切換不同的組件，比如咱們現(xiàn)在要展示一個文本框和輸入框，我們想要根據(jù)我們data中定義的值去決定是顯示文本框還是輸入框

何為動態(tài)組件

動態(tài)組件是根據(jù)數(shù)據(jù)的變化，可以隨時切換不同的組件，比如咱們現(xiàn)在要展示一個文本框和輸入框，我們想要根據(jù)我們data中定義的值去決定是顯示文本框還是輸入框，如果用以前學的知識去做的話就是使用v-show的方式去做，雖然也能實現(xiàn)，但是比較復雜，代碼也多了很多，這時候用動態(tài)組件能很好的解決這個問題

何為異步組件

異步組件可以以異步的方式加載組件，實際項目中我們可以把大型的項目拆分成許多小js文件，等使用時再組合，而且可以實現(xiàn)懶加載，有些組件暫時不需要展示給用戶的我們可以等用戶看到時再加載進來。

示例解析

動態(tài)組件

展示一個輸入框或者文本，通過一個按鈕，點擊后可以切換展示，比如當前展示文本，點擊按鈕就會變?yōu)檎故据斎肟?，代碼如下：

首先我們先定義兩個組件，一個展示輸入框，一個展示文本

  app.component('input-item',{
        template:`
            <input />
           `
    });
    app.component('common-item',{
        template:`<div>hello world</div>`
    });

定義一個currentItem變量用于控制組件的展示

data() {
        return {
            currentItem: 'input-item'
        }
    },

使用組件時使用component關鍵字，然后使用:is = "顯示具體組件的依賴數(shù)據(jù)（本例子中時currentItem）"的方式動態(tài)加載組件

  template: 
        `
        <keep-alive>
        <component :is="currentItem"/>
        </keep-alive>
        <button @click="handleClick">switch</button>
        `

keep-alive:組件切換時在組件中的值會被清掉，比如輸入框中的值，所以需要使用keep-alive來防止值被清理

定義點擊按鈕后執(zhí)行的方法，這個方法就是改變current Item的值，讓其顯示不同的組件

 methods: {
        handleClick(){
            if(this.currentItem === 'input-item'){
                this.currentItem = 'common-item';
            }else{
                this.currentItem = 'input-item';
            }
        }
    }

所有代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>動態(tài)組件</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
 const app = Vue.createApp({
    data() {
        return {
            currentItem: 'input-item'
        }
    },
    methods: {
        handleClick(){
            if(this.currentItem === 'input-item'){
                this.currentItem = 'common-item';
            }else{
                this.currentItem = 'input-item';
            }
        }
    },
        template: 
        `
        <keep-alive>
        <component :is="currentItem"/>
        </keep-alive>
        <button @click="handleClick">switch</button>
        `
    });
    app.component('input-item',{
        template:`
            <input />
           `
    });
    app.component('common-item',{
        template:`<div>hello world</div>`
    });
    const vm = app.mount('#root');
</script>
</html>

異步組件

假如我們要展示一個文本，這個文本不會馬上展示，而是4秒后再展示

首先定義兩個組件，一個同步組件，一個異步組件

定義同步組件

 app.component('common-item',{
        template:`<div>hello world</div>`
    })

定義異步組件，使用Vue.defineAsyncComponent定義異步組件

 app.component('async-common-item',
 Vue.defineAsyncComponent(()=>{
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve({
                    template:`<div>this is an async component</div>`
                })
            },4000)  
        })
    }));

使用組件

 const app = Vue.createApp({
        template: 
        `
        <div>
            <common-item />
            <async-common-item />
        </div>
        `
    });

全部代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>異步組件</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
 const app = Vue.createApp({
        template: 
        `
        <div>
            <common-item />
            <async-common-item />
        </div>
        `
    });
    app.component('common-item',{
        template:`<div>hello world</div>`
    })
    // 異步組件：可以通過異步組件的方式動態(tài)加載組件，可以把大型項目拆分成許多的小js 文件，使用時再組合
    app.component('async-common-item',
        Vue.defineAsyncComponent(()=>{
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve({
                    template:`<div>this is an async component</div>`
                })
            },4000)        
        })
    }));
    const vm = app.mount('#root');
</script>
</html>