溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Vue動態(tài)組件與異步組件怎么使用

發(fā)布時間：2023-03-16 10:51:25 來源：億速云 閱讀：81 作者：iii 欄目：開發(fā)技術(shù)

這篇“Vue動態(tài)組件與異步組件怎么使用”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue動態(tài)組件與異步組件怎么使用”文章吧。

    何為動態(tài)組件

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

    何為異步組件

    異步組件可以以異步的方式加載組件，實際項目中我們可以把大型的項目拆分成許多小js文件，等使用時再組合，而且可以實現(xià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>

    以上就是關(guān)于“Vue動態(tài)組件與異步組件怎么使用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。

    向AI問一下細節(jié)

    免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

    vue
    AI
    助
    手