Vue3的setup在el-tab中動態載入組件

来源:https://www.cnblogs.com/BigFace123/archive/2022/11/16/16895608.html
-Advertisement-
Play Games

1、data Vue 會遞歸將 data 的屬性轉換為 getter/setter,從而讓 data 的屬性能夠響應數據變化。對象必須是純粹的對象 (含有零個或多個的 key/value 對) data () { return { dataForm: { xxx: ‘’, xxx: 數字 //這裡的 ...


公司某項目需求在頁面顯示的組件是根據角色變化而變化的,在這個項目中我使用了elementplus的el-tabs來動態的顯示這些組件,如下圖所示

數據內容大概是這樣的

在未使用setup語法糖時候我要引入組件只需要在components中定義組件就好了,如下圖

然後就可以快樂得在component組件的:is中遍歷進組件的名稱就好了;但是在使用了setup語法糖之後,沒有了components選項,我突然就有點無從下手,在vue3官網中我看到了setup掛載組件的用法

那就照著官網照貓畫虎吧,於是就寫下瞭如下代碼

然後發現不對勁,啥也不顯示,進devtools一看,這東西怎麼沒掛上啊

啥也沒有!

沒辦法,再仔細看看官網文檔吧

官網中明確說明組件是通過變數引用而不是基於字元串組件名註冊的,然而我在資料庫中取出來的組件名必然是字元串,這可咋整,只能用eval了唄

但是還是不行,瀏覽器報錯

難道import定義組件在這裡面不行?那就試試defineAsyncComponent試試

OK,能看見了

查看列印結果,moudle_id內容也變成組件了

問題解決


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

-Advertisement-
Play Games
更多相關文章
  • 關於Intent.setDataAndType參數問題 install取設置屬於和類型,數據就是獲取到的uri,更具文件類型不同,type參數也不相同,具體參考下表 {尾碼名,MIME類型} ​ {".3gp", "video/3gpp"}, ​ {".apk", "application/vnd. ...
  • android studio 升級 Android Studio Dolphin | 2021.3.1 Patch 1後,xml佈局預覽界面報錯 一開始以為是那些警告導致的,有很多黃色的xml警告,比如命名的名字不是英文,或者設置了各種顏色值警告,或者系統要求你添加 contentDescripti ...
  • 滑動衝突 有時候 viewpager 嵌套 webview 後,左右滑動衝突,直接消費或者處理攔截導致上下不能滑動,所以需要根據滑動情況判斷處理,只在上下滑動時判斷事件交給子view class ScrollWebView(context: Context, attrs: AttributeSet) ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 場景 在App中撥打電話是一個比較常見的應用場景,但是我們通過搜索文章,發現,大部分的博文都是uni-app官網的copy, copy uni-app 提供的打電話,只是幫你把撥號界面呼出來,並不能直接撥打, 安卓原生API可以,IOS因 ...
  • 前言: 自學第一天,什麼是TS ,為什麼要用 TS TS 全程 Typed JavaScript at Any Scale 解釋起來就是 添加了類型系統的 JavaScript, 是 JavaScript 的一個超集 讓 JS 從動態類型的語言,變成了一個靜態類型的語言,給變數賦予了類型 好,到這裡 ...
  • 該系列已更新文章: 分享一個實用的 vite + vue3 組件庫腳手架工具,提升開發效率 開箱即用 yyg-cli 腳手架:快速創建 vue3 組件庫和vue3 全家桶項目 Vue3 企業級優雅實戰 - 組件庫框架 - 1 搭建 pnpm monorepo Vue3 企業級優雅實戰 - 組件庫框架 ...
  • 介紹 Vue.js 中文文檔地址:https://cn.vuejs.org/guide/introduction.html#what-is-vue Vue.js 是什麼 Vue (讀音 /vjuː/,類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是,Vue 被設計為可以 ...
  • 給el-dialog添加@open="open()" 在剛進入頁面的時候對話框是關閉的,echarts不進行獲取dom,當點擊對話框出來的時候,有個opened事件,在這個事件裡邊進行echarts的初始化,執行數據; <el-dialog lock-scroll width="80%" style ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程,Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor,topic=orders 本文前提知識:熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • 引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識,這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示,用於衡量代碼被測試覆蓋的程度,幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率(Line Coverage)、分支覆蓋率(Bra ...
  • 前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫,記錄了使用電腦模擬,模擬PLC,自至完成測試的詳細流程,並重點介紹了在這個過程中的易錯點,供參考。 用到的軟體: 1.Windows環境下鏈路層網路訪問的行業標準工具(WinPcap_4_1_3.exe)下載鏈接:http ...
  • 從依賴倒置原則(Dependency Inversion Principle, DIP)到控制反轉(Inversion of Control, IoC)再到依賴註入(Dependency Injection, DI)的演進過程,我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • 關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制,這與其他面相對對象語言有區別。關於私有屬性和私有方法,有如下要點: 1、通常我們約定,兩個下劃線開頭的屬性是私有的(private)。其他為公共的(public); 2、類內部可以訪問私有屬性(方法); 3、類外 ...
  • C++ 訪問說明符 訪問說明符是 C++ 中控制類成員(屬性和方法)可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符: public:允許從類外部的任何地方訪問成員。 private:僅允許在類內部訪問成員。 protected:允許在類內部及其派生類中訪問成員。 示 ...
  • 寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先,【static_cast,dynamic_cast】【父類指針,子類指針】,兩兩一組,共有4種組合:用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • 相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage,將包下的類按照一定規則註冊成Be ...
  • 操作系統 :CentOS 7.6_x64 opensips版本: 2.4.9 python版本:2.7.5 python作為腳本語言,使用起來很方便,查了下opensips的文檔,支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...