快捷導(dǎo)航

Element框架el-tab點(diǎn)擊標(biāo)簽頁(yè)時(shí)再渲染問(wèn)題的解決

更新時(shí)間：2022年04月15日 10:13:39 作者：尋瀑

本文主要介紹了Element框架el-tab點(diǎn)擊標(biāo)簽頁(yè)時(shí)再渲染問(wèn)題的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

之前一直以為這種標(biāo)簽頁(yè)加載時(shí)要么同時(shí)渲染，加載所有頁(yè)面；要么通過(guò)el-tab的@tab-click事件，通過(guò)判斷tab.name選擇加載。但是后者有兩個(gè)弊端：（1）頁(yè)面仍然一下子渲染，向后臺(tái)請(qǐng)求許多接口，造成頁(yè)面加載緩慢，無(wú)法實(shí)現(xiàn)實(shí)時(shí)渲染的效果（2）不能解決父子組件數(shù)據(jù)傳遞的問(wèn)題）

1. 父子組件數(shù)據(jù)傳遞問(wèn)題：

<!--父組件-->
<el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="我的行程" name="1">
        <child :asyncData="asyncData"></child>
    </el-tab-pane>
    <el-tab-pane label="消息中心" name="2">配置</el-tab-pane>
</el-tabs>

//子組件
export default{
    data(){
        return{
            asyncArray:[]
        }
    },
    props:{
        asyncData : Array
    },
    mounted(){
        this.asyncArray = this.asyncData || []
    }
}

上面的例子中，父組件調(diào)用子組件child，同時(shí)向子組件傳遞了一個(gè)數(shù)組asyncData，且變量asyncData的值是由接口請(qǐng)求返回的。

子組件在mounted中使用由父組件傳遞的asyncData，但是在mounted時(shí)，父組件的接口還沒(méi)有返回所需的數(shù)據(jù)，因此asyncData返回值為undefined，導(dǎo)致子組件中的asyncArray被賦值為空數(shù)組。即使后面接口返回了所需的數(shù)據(jù)，子組件中可以取得asyncData的正常值。但由于asyncArray已被賦值為空數(shù)組，與asyncData指向的不是同一個(gè)地址，所以asyncArray的值依然是空數(shù)組。

2.lazy屬性

在element官網(wǎng)中發(fā)現(xiàn)了lazy屬性：

在默認(rèn)值為false的情況下，標(biāo)簽頁(yè)里的內(nèi)容與標(biāo)簽是同時(shí)渲染的，未展開的標(biāo)簽頁(yè)時(shí)display:none；當(dāng)更改為true以后，未展開的標(biāo)簽頁(yè)并不會(huì)渲染，二十等切換之后才會(huì)渲染，這樣不僅實(shí)現(xiàn)了實(shí)時(shí)加載標(biāo)簽頁(yè)內(nèi)容的效果，同時(shí)也有足夠的時(shí)間等待接口返回?cái)?shù)據(jù)。

到此這篇關(guān)于Element框架el-tab點(diǎn)擊標(biāo)簽頁(yè)時(shí)再渲染問(wèn)題的解決的文章就介紹到這了,更多相關(guān)Element el-tab渲染內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: