环境： Arco Pro + Vue3

vite自身对动态字符串形式的组件引入是有限制的, 以下写法会报错

官方文档中也对此有做说明， 只能通过固定形式去引用

以下形式不会报错， 但这种固定格式的局限性非常大， 同时， 如果使用下方注释的写法， 虽然会警告， 但开发环境中依然可以正常执行

于是考虑了在外部定义对象, 现将组件引入到外部对象中, 再引用这个对象, TS使用映射来处理

这样就能在组件中通过提供对象上对应的属性, 来导入需要使用的组件

不过这种方法需要自己先在外部文件中手动按需导入组件, 但对组件得路径和名称都没有限制,不知道有没有更便捷的方法, 萌新一枚

typescript 的动态引入组件的更多相关文章

  1. Vue动态创建组件方法

    组件写好之后有的时候需要动态创建组件.例如: 编辑文章页面,正文是一个富文本编辑器,富文本编辑器是一个第三方的组件,点击添加章节的时候需要动态的创建一个富文本编辑器这个时候怎么处理呢. 富文本编辑器也 ...

  2. 解决基于TypeScript 的 RN项目相对路径引入组件的问题

    一.前言 在开发RN项目时,经常会要使用这样的方式(../../../)来引入组件,感觉非常繁琐,如果项目结构层级比较多,引入的头部更加分不清. 那有没有一种方案和vue项目一样,经过配置后简写路径, ...

  3. Angular使用总结 --- 通过指令动态添加组件

    之前自己写的公共组件,都是会先引入,需要调起的时候再通过service控制公共组件状态.值.回调函数什么的.但是有一些场景不适合这种方式,还是动态添加组件更加好.通过写过的一个小组件来总结下. 创建组 ...

  4. jsp静态、动态引入其他jsp

    1. <%@ include file="page.jsp"%> /*静态引入,内容必须写成固定值*/    在servlet容器转化jsp为servlet时,将引入的 ...

  5. Java 动态编译组件 & 类动态加载

    1.JDK6 动态编译组件 Java SE 6 之后自身集成了运行时编译的组件:javax.tools,存放在 tools.jar 包里,可以实现 Java 源代码编译,帮助扩展静态应用程序.该包中提 ...

  6. 动态创建组件TEdit

    //动态创建组件TEdit procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton;  Shift: TShiftSt ...

  7. Delphi动态创建组件，并释放内存

    开发所用delphi版本是xe2,效果图如下: 代码如下: ---------------------------------------------------------------------- ...

  8. Angular动态创建组件之Portals

    这篇文章主要介绍使用Angular api 和 CDK Portals两种方式实现动态创建组件,另外还会讲一些跟它相关的知识点,如:Angular多级依赖注入.ViewContainerRef,Por ...

  9. 【Vue.js】vue引入组件报错：该组件未注册？

    [Vue warn]: Unknown custom element: <QuestionnaireOption> - did you register the component cor ...

  10. android动态设置组件LayoutParams

    开发中经常用到动态设置组件的LayoutParams,之前开发遇到的问题如下: LinearLayout.LayoutParams params = new LinearLayout.LayoutPa ...

随机推荐

  1. string转JSONObject顺序不变和 往map放数据按顺序

    JSONObject field = JSONObject.parseObject(fieldStr,Feature.OrderedField); Map<String,String> m ...

  2. Android 隐藏和显示软键盘

    1 public static void hideKeyboard(View view){ 2 InputMethodManager imm = (InputMethodManager) view.g ...

  3. windows检查

    # coding: UTF-8 import psutil import platform import re def get_cpu_used(upu_base, interval=1): perc ...

  4. cesium开启关闭日照（含有模型）

    准备条件:已经完成3Dtiles的导入 和viewer的创建 <script>//开日照 function Bshadows(){ viewer.scene.globe.enableLig ...

  5. openpyxl-使用API总结

    import openpyxlfrom openpyxl.comments import Comment from openpyxl.styles import Font, Alignment, Bo ...

  6. ubuntu64运行32位程序安装过程

    Ubuntu运行32位程序可以使用如下方法: 第一步: 确认你有一个64位架构的内核 你可以打开终端然后输入: dpkg --print-architecture 你将会看到像下面这样的内容: amd ...

  7. JavaScript基础知识整理（引用类型-Date）

    Date Date类型可以用来保存时间,保存的日期可以精确到1970年1月1日之后或之前的100000000天. 要创建Date类型对象,可以使用new操作符加构造函数. var now = new ...

  8. 作业一：PCA降维练习

    作业一:PCA降维作业 代码 点击查看代码 #author:qiao_px #@Time 2022/10/31 16:11 #@File ceshiPCA.py import pandas as pd ...

  9. python + uiautomator2 常用公共方法封装

    前言 由于公司UI自动化框架底层用的是Uiautomator2,所以我就用Uiautomator2搭了一套UI自动化框架,思路其实和Appnium一样的. uiautomator2是一个自动化测试开源 ...

  10. css 背景渐变

    1.渐变从左到右 background: linear-gradient(to right,#000,#fff); 2.渐变从上到下 background: linear-gradient(tobot ...