国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

組件(6)：動態(tài)組件

chuyao / 516人閱讀

摘要：組件的動態(tài)切換父組件可以通過元素，在其特性上綁定一個屬性，該屬性的值表示了一個子組件，可以是一個對象，或字符串子組件名稱。可以發(fā)現(xiàn)，使用屬性觀察可用組件個數(shù)時始終不超過，這是因為每次切換，舊的組件將被直接移除，下次切換時要重新渲染。

組件的動態(tài)切換

父組件可以通過元素，在其特性is上綁定一個屬性，該屬性的值表示了一個子組件，可以是一個對象，或字符串（子組件名稱）。

頁面綁定：
父組件組件內(nèi)定義：currentView:"childName|childObj"

這樣父組件就可以通過一個方法，在一個掛載點上動態(tài)的切換多個子組件的顯示。

var external = {
    template: "
refer external object 
"
}
new Vue({
    el: "#app-1",
    data: {
        currentView: external
    },
    methods: {
        switchCpt: function(){
            var arr = [external,"home","posts","archive"]
            var index = arr.indexOf(this.currentView)
            if(index < 4){
                this.currentView = arr[index+1]
            }else{
                this.currentView = arr[0]
            }
        }
    },
    components: {
        home: {
            template: "
component home
"
        },
        posts: {
            template: "
component posts
"
        },
        archive: {
            template: "
component archive
"
        }
    }
})

    
    
    
內(nèi)存中保留的組件個數(shù):{{$children.length}}

點擊按鈕，在不同的子組件之間切換顯示。
可以發(fā)現(xiàn)，使用$children屬性觀察可用組件個數(shù)時始終不超過1，這是因為每次切換，舊的組件將被直接移除，下次切換時要重新渲染。如果要在內(nèi)存中保留所有組件，需要使用keep-alive元素。

keep-alive

如果把切換出去的組件保留在內(nèi)存中，可以保留它的狀態(tài)或避免重新渲染，為此就需要使用keep-alive。
javascript代碼不變，修改html，使用包圍組件。


    
    
        
    
    
內(nèi)存中保留的組件個數(shù):{{$children.length}}

結(jié)果是渲染過的組件都被保留了。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/51995.html

相關(guān)文章

  • 組件(6)：動態(tài)組件

    摘要：組件的動態(tài)切換父組件可以通過元素，在其特性上綁定一個屬性，該屬性的值表示了一個子組件，可以是一個對象，或字符串子組件名稱。可以發(fā)現(xiàn)，使用屬性觀察可用組件個數(shù)時始終不超過，這是因為每次切換，舊的組件將被直接移除，下次切換時要重新渲染。 組件的動態(tài)切換 父組件可以通過元素，在其特性is上綁定一個屬性，該屬性的值表示了一個子組件，可以是一個對象，或字符串（子組件名稱）。 頁面綁定：父組件組件...

    eccozhou 評論0 收藏0

  • BREW精要之COM 模型

    摘要：與使用作為接口的唯一標識類似，使用稱之為的一個字節(jié)無符號整數(shù)作為唯一標識。接口是客戶程序和組件程序之間的橋梁，接口應(yīng)該具有不變性，并且一個對象也應(yīng)該支持多個接口。 COM是Component Object Model （組件對象模型）的縮寫。BREW基本上遵從COM這一組件構(gòu)架的。組...

    lily_wang 評論0 收藏0

  • vue輕量級后臺管理系統(tǒng)基礎(chǔ)模板

    摘要：具體實現(xiàn)請查看和的退出登陸回調(diào)方法。現(xiàn)在除了必要的頁面需要在一開始添加到路由表里，其他的頁面都可以根據(jù)后臺數(shù)據(jù)來自動生成。另外，如果在未登陸時要訪問某一指定頁面，會重定向到登陸頁，登陸成功后會自動跳到這個指定頁面。 項目地址 vue-admin-template 在線預(yù)覽 更新 2019.6.25 更新 修復(fù)路由表沖突問題 退出當前用戶，換賬號重新登陸時，上個賬號和現(xiàn)在的賬號路由表會有...

    2shou 評論0 收藏0

  • 后端開發(fā)者的Vue學習之路（三）

    摘要：使用組件全局定義組件，第一個參數(shù)是組件名，的值是組件的內(nèi)容這是個待辦項實例化是必須的，要把使用組件的區(qū)域交給管理局部注冊組件局部注冊組件全局注冊往往是不夠理想的。目錄 上節(jié)內(nèi)容回顧 組件 什么是組件 組件注冊 全局注冊組件 局部注冊組件 ...

    番茄西紅柿 評論0 收藏0

  • vue2.0指不了南

    摘要：回調(diào)函數(shù)會接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)。添加事件偵聽器時使用模式。只當事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)。 零．混沌 vue是什么 vue是一套構(gòu)建用戶界面的漸進式框架。 他的特點： 簡潔：頁面由HTML模板+Json數(shù)據(jù)+Vue實例組成 數(shù)據(jù)驅(qū)動：自動計算屬性和追蹤依賴的模板表達式 組件化：用可復(fù)用、解耦的組件來構(gòu)造頁面 輕量：代碼量小，不依賴其他庫 快速：精確有...

    張紅新 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<