环境： 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. 关于前端:解决elementUI的对话框Dialog组件点击自动跳转到页面顶部问题

    查看文档寻找解决办法 增加这两个参数即可完满解决 <el-dialog :lock-scroll="false" :append-to-body="true&quo ...

  2. MySQL 常用命令（1）------连接、添加用户与授权

    一.连接MySQL 格式: mysql -h主机地址 -u用户名 -p用户密码 1.连接到本机上的MYSQL 进入目录mysql\bin,再键入命令mysql -u root -p,回车后提示你输密码 ...

  3. vue-cli打包后运行报路径错误 不知道什么牛马问题 连默认生成的项目不动一行代码直接打包都会出错

    不知道什么牛马问题 连默认生成的项目不动一行代码直接打包都会出错 解决方法 新建一个 vue.config.js module.exports = { publicPath: './', config ...

  4. 页面-vue

    1.安装node.js 语言-页面-开发环境-node.js,webpack,安装 - hehehenhen - 博客园 (cnblogs.com) 2.安装webpack 语言-页面-开发-webp ...

  5. 每日一抄 Go语言死锁、活锁和饥饿概述

    DeadLock package main import ( "fmt" "runtime" "sync" "time" ...

  6. css - contenteditable

    css - contenteditable contenteditable属性 contenteditable 属性是 HTML5 中的新属性.规定是否可编辑元素的内容. 让contenteditab ...

  7. 037_Clone Button

    ResolutionTo do this first go to Setup | Customize | Accounts | Buttons and Links | New. Enter the f ...

  8. 放苹果 tzoj2679 //自然数拆分 tzoj5827;（dp）

    放苹果 tzoj2679  描述 把M个同样的苹果放在N个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分法?(用K表示)5,1,1和1,5,1 是同一种分法. 输入 第一行是测试数据的数目t ...

  9. Linux ~ jenkins 直接安装

    前置条件: 1. Jenkins是由java编写的,所以最好安装java8以上的环境 开始安装: 1. 配置yum源,将jenkins导入yum源 sudo wget -O /etc/yum.repo ...

  10. linux 学习shell

    1. bash的父进程,子进程 [root@A~]# my_var=123[root@A~]# echo $my_var123[root@A~]# bash[root@A~]# [root@A~]# ...