vue加载外部组件

最新推荐文章于 2024-04-30 11:19:38 发布

前端混子

最新推荐文章于 2024-04-30 11:19:38 发布

阅读量154

点赞数

分类专栏：特殊需求文章标签： vue.js 前端

本文链接：https://blog.csdn.net/ithunzi/article/details/130412860

版权

特殊需求专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该代码示例展示了如何在Vue应用中异步加载外部组件。通过匹配URL获取组件名称，创建并添加script标签来加载JS文件，使用Promise处理加载成功或失败的情况。当脚本加载完成后，将组件添加到window对象上供应用使用。

摘要由CSDN通过智能技术生成

vue加载外部组件

export default async function externalComponent(url) {
  const name = url.match(/(\w+).js$/)[1]
  if (window[name]) return window[name];

  window[name] = new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.async = true;
    script.addEventListener('load', () => {
      resolve(window[name]);
    });
    script.addEventListener('error', () => {
      reject(new Error(`Error loading ${url}`));
    });
    script.src = url;
    document.head.appendChild(script);
  });

  return window[name];
}