vue3+ts 动态导入多文件组件

news/2024/5/20 2:33:00 标签: javascript, 前端, ts, vue3, 组件

 1、在components文件夹中新建index.ts文件(components文件夹下为创建的组件

javascript">// index.ts
const modules = import.meta.globEager("./*.vue");  //参数为组件路径
let componentsOpts = {}

const getCaption = (obj, str, z: boolean) => {
  let index = obj.lastIndexOf(str);
  if (z) index += str.length
  // z为true则截取/之后的内容,反之
  obj = z ? obj.substring(index, obj.length) : obj.substring(0, index);
  return obj;
};

for (let path in modules) {
  let str = getCaption(path, './', true)
  str = getCaption(str, '.vue', false)
  componentsOpts[str] = modules[path]['default']
}

export default componentsOpts

2、在vue文件中引入组件

javascript">// list.vue
<script setup lang='ts'>
import componentObj from './components'

// const 组件名称 = componentObj['组件文件名称']
const ContentMain = componentObj['main']

</script>

<template>
  <div>
    <content-main ></content-main>
  </div>
</template>

<style scoped lang='scss'>

</style>


http://www.niftyadmin.cn/n/4929371.html

相关文章

目标检测中遇到的问题和 docker导出日志

一 docker容器导出日志 导出日志在Linux服务器的本地目录下&#xff0c;可以直接下载 docker logs 容器名称 > log.txt 二 Flask使用main执行 1 改dockerfile 文件内容 #CMD [ "python3", "-m" , "flask", "run", "--hos…

谷歌推出Flax:JAX的神经网络库

在优化理论中&#xff0c;损失或成本函数测量拟合或预测值与实际值之间的距离。对于大多数机器学习模型&#xff0c;提高性能意味着最小化损失函数。 但对于深度神经网络&#xff0c;执行梯度下降以最小化每个参数的损失函数可能会消耗大量资源。传统方法包括手动推导和编码&a…

数据结构:交换排序

冒泡排序 起泡排序&#xff0c;别名“冒泡排序”&#xff0c;该算法的核心思想是将无序表中的所有记录&#xff0c;通过两两比较关键字&#xff0c;得出升序序列或者降序序列。 算法步骤 比较相邻的元素。如果第一个元素大于第二个元素&#xff0c;就交换它们。对每一对相邻…

【人工智能概述】python妙用 __str__()

【人工智能概述】python妙用 str() 文章目录 【人工智能概述】python妙用 __str__()一.python内置函数__str__() 一.python内置函数__str__() 通过自定义__str__()函数可以打印对象中相关的内容。 class Person(object):def __init__(self, name tom, age 10):self.name n…

PHP 之房贷计算器、组合贷

一、等额本金 // &#xff08;等额本金&#xff09; //$loanAmount>贷款金额 //$loanPeriod>贷款年限 //$interestRate>贷款利息 function calculateEqualPrincipalPayment($loanAmount, $loanPeriod, $interestRate) {$monthlyPrincipal $loanAmount / ($loanPerio…

【算法】逆波兰表达式

文章目录 定义求法代码思想&#xff1a; 定义 逆波兰表达式也称为“后缀表达式”&#xff0c;是将运算符写在操作数之后的运算式。 求法 *如&#xff1a;(ab)c-(ab)/e的转换过程&#xff1a; 先加上所有的括号。 (((ab)*c)-((ab)/e))将所有的运算符移到括号外面 (((ab) c)* …

用C++实现的RTS游戏的路径查找算法(A*、JPS、Wall-tracing)

在实时策略&#xff08;RTS&#xff09;游戏中&#xff0c;路径查找是一个关键的问题。游戏中的单位需要能够找到从一个地方到另一个地方的最佳路径。这个问题在计算机科学中被广泛研究&#xff0c;有许多已经存在的算法可以解决这个问题。在本文中&#xff0c;我们将探讨三种在…

使用xrdp协议远程桌面控制树莓派,无需公网IP!

远程桌面控制树莓派&#xff0c;我们可以用xrdp协议来实现&#xff0c;它内部使用的是windows远程桌面的协议。我们只需要在树莓派上安装xrdp&#xff0c;就可以在同个局域网下远程桌面控制树莓派。 而如果需要在公网下远程桌面控制树莓派&#xff0c;可以通过cpolar内网穿透&…