快捷導(dǎo)航

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

更新時間：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中定義的值去決定是顯示文本框還是輸入框，如果用以前學(xué)的知識去做的話就是使用v-show的方式去做，雖然也能實現(xiàn)，但是比較復(fù)雜，代碼也多了很多，這時候用動態(tài)組件能很好的解決這個問題

何為異步組件

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

示例解析

動態(tài)組件

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

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

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

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

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

使用組件時使用component關(guān)鍵字，然后使用: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>