組件(6)：動態組件

eccozhou 發布于2019-08-22 15:25 / 1491人閱讀

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

組件的動態切換

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

頁面綁定：
父組件組件內定義：currentView:"childName|childObj"

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

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"
        }
    }
})


    
    
    內存中保留的組件個數:{{$children.length}}

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

keep-alive

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


    
    
        
    
    內存中保留的組件個數:{{$children.length}}

結果是渲染過的組件都被保留了。

云服務器 GPU云服務器 vuejs動態組件父子組件-動態渲染動態添加組件微信泛型動態添加組件c

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93458.html

組件(6)：動態組件

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

chuyao 2019-08-01 18:41 評論0 收藏0
BREW精要之COM 模型

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

lily_wang 2021-11-22 15:22 評論0 收藏0
vue輕量級后臺管理系統基礎模板

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

2shou 2019-08-23 14:17 評論0 收藏0
后端開發者的Vue學習之路（三）

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

番茄西紅柿 2019-04-23 11:51 評論0 收藏0
vue2.0指不了南

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

張紅新 2019-08-20 15:31 評論0 收藏0