快捷導(dǎo)航

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

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

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

何為動(dòng)態(tài)組件

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

何為異步組件

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

示例解析

動(dòng)態(tài)組件

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

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

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

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

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

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

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

keep-alive:組件切換時(shí)在組件中的值會(huì)被清掉，比如輸入框中的值，所以需要使用keep-alive來(lái)防止值被清理

定義點(diǎn)擊按鈕后執(zhí)行的方法，這個(gè)方法就是改變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>動(dòng)態(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>

異步組件

假如我們要展示一個(gè)文本，這個(gè)文本不會(huì)馬上展示，而是4秒后再展示

首先定義兩個(gè)組件，一個(gè)同步組件，一個(gè)異步組件

定義同步組件

 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>`
    })
    // 異步組件：可以通過(guò)異步組件的方式動(dòng)態(tài)加載組件，可以把大型項(xiàng)目拆分成許多的小js 文件，使用時(shí)再組合
    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>

總結(jié)

本文主要是簡(jiǎn)單介紹了動(dòng)態(tài)組件和異步組件的定義及使用的方法，動(dòng)態(tài)組件是可以讓我們使用者通過(guò)一定的條件決定展示哪個(gè)組件，而異步組件可以讓我們實(shí)現(xiàn)組件懶加載的功能，使大型項(xiàng)目可以拆成許多小js文件，使用時(shí)再組合，非常方便

到此這篇關(guān)于Vue動(dòng)態(tài)組件與異步組件超詳細(xì)講解的文章就介紹到這了,更多相關(guān)Vue動(dòng)態(tài)組件與異步組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: