vue動態子組件的實現方式

来源:https://www.cnblogs.com/moqiutao/archive/2019/08/31/11440315.html
-Advertisement-
Play Games

讓多個組件使用同一個掛載點,並動態切換,這就是動態組件。 通過使用保留的 <component>元素,動態地綁定到它的 is 特性,可以實現動態組件。 方式一:局部註冊所需組件 使用<keep-alive>緩存 <keep-alive> 包裹動態組件時,會緩存不活動的組件實例,而不是銷毀它們。和 < ...


讓多個組件使用同一個掛載點,並動態切換,這就是動態組件。

通過使用保留的 <component>元素,動態地綁定到它的 is 特性,可以實現動態組件。

方式一:局部註冊所需組件

<div id="example">
  <button @click="change">切換頁面</button>
  <component :is="currentView"></component>
</div>
<script>
var home = {template:'<div>我是主頁</div>'};
var post = {template:'<div>我是提交頁</div>'};
var archive = {template:'<div>我是存檔頁</div>'};
new Vue({
  el: '#example',
  components: {
    home,
    post,
    archive,
  },
  data:{
    index:0,
    arr:['home','post','archive'],
  },
  computed:{
    currentView(){
        return this.arr[this.index];
    }
  },
  methods:{
    change(){
      this.index = (++this.index)%3;
    }
  }
})
</script>

使用<keep-alive>緩存

<keep-alive> 包裹動態組件時,會緩存不活動的組件實例,而不是銷毀它們。和 <transition>相似,<keep-alive> 是一個抽象組件:它自身不會渲染一個 DOM 元素,也不會出現在父組件鏈中。

基本用法:

<div id="example">
  <button @click="change">切換頁面</button>
  <keep-alive>
    <component :is="currentView"></component>  
  </keep-alive>
</div>

條件判斷

如果有多個條件性的子元素,<keep-alive> 要求同時只有一個子元素被渲染:

<div id="example">
  <button @click="change">切換頁面</button>
  <keep-alive>
    <home v-if="index===0"></home>
    <posts v-else-if="index===1"></posts>
    <archive v-else></archive>  
  </keep-alive>
</div>
<script>
new Vue({
  el: '#example',
  components:{
    home:{template:`<div>我是主頁</div>`},
    posts:{template:`<div>我是提交頁</div>`},
    archive:{template:`<div>我是存檔頁</div>`},
  },
  data:{
    index:0,
  },
  methods:{
    change(){
      let len = Object.keys(this.$options.components).length;
      this.index = (++this.index)%len;
    }
  }
})
</script>

activated 和 deactivated

activated 和 deactivated 在 <keep-alive> 樹內的所有嵌套組件中觸發:

<div id="example">
  <button @click="change">切換頁面</button>
  <keep-alive>
    <component :is="currentView" @pass-data="getData"></component> 
  </keep-alive>
  <p>{{msg}}</p>
</div>
<script>
new Vue({
  el: '#example',
  data:{
    index:0,
    msg:'',    
    arr:[
      { 
        template:`<div>我是主頁</div>`,
        activated(){
          this.$emit('pass-data','主頁被添加');
        },
        deactivated(){
          this.$emit('pass-data','主頁被移除');
        },        
      },
      {template:`<div>我是提交頁</div>`},
      {template:`<div>我是存檔頁</div>`}
    ],
  },
  computed:{
    currentView(){
        return this.arr[this.index];
    }
  },
  methods:{
    change(){
      var len = this.arr.length;
      this.index = (++this.index)% len;
    },
    getData(value){
      this.msg = value;
      setTimeout(()=>{
        this.msg = '';
      },500)
    }
  }
})
</script>

include和exclude

include 和exclude屬性允許組件有條件地緩存。二者都可以用逗號分隔字元串、正則表達式或一個數組來表示:

<!-- 逗號分隔字元串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
<!-- 正則表達式 (使用 v-bind) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
<!-- Array (use v-bind) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

匹配首先檢查組件自身name選項,如果name選項不可用,則匹配它的局部註冊名稱(父組件 components 選項的鍵值)。匿名組件不能被匹配。

<keep-alive include="home,archive">
    <component :is="currentView"></component> 
  </keep-alive>

上面的代碼,表示只緩存home和archive,不緩存posts

方式二:動態註冊組件實現

 asyncComponents(templateName){
    this.curNavComponents = require(`./components/${templateName}.vue`).default;
}

參考地址:


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • react+react-native+react-navigation+react-redux+react-native-swiper+rnPop等技術開發仿微信聊天室RN_ChatRoom,實現了app全屏啟動頁、popupWindow彈窗菜單、消息觸摸列表、發送消息、表情(動圖),圖片預覽,拍攝... ...
  • 前言 Koa 應用程式是一個包含一組中間件函數的對象,它是按照類似堆棧的方式組織和執行的。 當一個中間件調用 next() 則該函數暫停並將控制傳遞給定義的下一個中間件。當在下游沒有更多的中間件執行後,堆棧將展開並且每個中間件恢復執行其上游行為。 以上兩句話,是我在官方文檔中找到其對 Koa 中間件 ...
  • 08.31自我總結 Vue CLI項目 vue cookie與vue cookies處理cookie vue cookie 一.模塊的安裝 二.配置main.js 三.使用 概述: :this.$配置時候設置的名稱.set('cookies的key',value,時間最小單位為天且一定要為整數) : ...
  • CSS 選擇器: CSS id選擇器: id選擇器可以為標有特定 id的HTML元素指定特定的樣式 id選擇器是以 “ ” 來定義的 id選擇器常建立 派生選擇器 如上,在使用sidebar選擇器時,應用在p標簽上會使用第一個CSS樣式 單獨的選擇器 id選擇器即使不被用來創建 派生選擇器,也可以單 ...
  • 前言 最近在公司寫一個混合 app 項目,頁面基本全部都是用 H5 完成,嵌入到原生 webview 下。發現一個問題,在 iPhone 6 下 蘋果手機的狀態欄會擋住頁面,導致頁面下移,樣式錯亂,最後網上查找了些解決辦法,加了一條 meta 標簽解決了問題。今天特來總結下常用的移動端開發需要註意的 ...
  • 08.31自我總結 Vue CLI項目 axios前後端交互 一.模塊的安裝 二.配置main.js 三.使用 JS created() { // 組件創建成功的鉤子函數 // 拿到要訪問課程詳情的課程id let id = this.$route.params.pk || this.$route. ...
  • Vue CLI項目中路由傳參 一.標簽傳參方式:\\ 第一種 router.js 傳遞層 接收層 演變體 第二種 router.js 傳遞層 接收層 第三種 router.js 傳遞層 接收層 二.邏輯傳參:this.$router 第一種 python """ 路由: path: '/course ...
  • 1、Uncaught SyntaxError: Unexpected end of input js報錯: 翻譯:語法錯誤:輸入意外終止 原因:頁面代碼寫的不規範 ╮(╯▽╰)╭ 其中的某條語句,沒有正常結束 ε=(´ο`*))) 所以這個時候就要好好檢查自己寫的代碼有沒有什麼符號忘加啦,或者是雙引 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...