广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue如何动态加载组件详解
  • 468

0
分享到

vue如何动态加载组件详解

vue 组件动态加载vuejs动态加载组件vue 加载组件 2022-11-13 18:11:25 468人浏览 薄情痞子
摘要

目录使用场景：需要动态导入组件的页面核心组件的代码：使用场景：总结使用场景： 项目中需要我们根据不同的业务需求呈现不同的业务场景，如果业务类型简单还好，直接全部引入判断即可，但随着我

使用场景：

项目中需要我们根据不同的业务需求呈现不同的业务场景，如果业务类型简单还好，直接全部引入判断即可，但随着我们代码的沉积，项目将会变得很难维护，这时候我们可以使用动态引入组件的方式来避免这个问题，首先第一步实现就是，在Vue中，我们如何动态引入组件？

话不多说，直接上干货

需要动态导入组件的页面

在这个页面引入我们的组件Test

<template>
  <div>
    <Test :data="DemoData"
          :type="type" />
  </div>
</template>
<script>

import Test from '@components/demo/index.vue'
export default {
  components: {
    Test
  },
  data() {
    return {
      type: 'demo2',
      DemoData: 'demoData'
    }
  },

}
</script>

组件库文件夹格式根据自己的喜好来设置

核心组件的代码：

<template>
  <component :is="component"
             v-if="component" />
</template>
<script>


export default {
  name: 'test',
  props: ['data', 'type'],

  data() {
    return {
      component: null
    }
  },
  computed: {
    loader() {
      return () => import(`@components/demo/demoTemplates/${type}`)
    }
  },
  mounted() {
    this.loader()
      .then(() => {
        this.component = () => this.loader()
      })
      .catch(() => {
        this.component = () =>
          import('@components/demo/demoTemplates/defaultDemo')
      })
  }
}
</script>

这样就可以动态加载组件了

利用的原理知识是es6新增的inport()函数

ES2020提案 引入import()函数，支持动态加载模块。

import()返回一个 Promise 对象。下面是一个例子。

const main = document.querySelector('main');

import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外，import()函数与所加载的模块没有静态连接关系，这点也是与import语句不相同。import()类似于 node 的require方法，区别主要是前者是异步加载，后者是同步加载。

使用场景：

（1）按需加载。

import()可以在需要的时候，再加载某个模块。

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    
  })
});

上面代码中，import()方法放在click事件的监听函数之中，只有用户点击了按钮，才会加载这个模块。

动态的模块路径

import()允许模块路径动态生成。

import(f())
.then(...);

上面代码中，根据函数f的返回结果，加载不同的模块。

注意点：

import()加载模块成功以后，这个模块会作为一个对象，当作then方法的参数。因此，可以使用对象解构赋值的语法，获取输出接口。

import('./myModule.js')
.then(({export1, export2}) => {
  // ...·
});

上面代码中，export1和export2都是myModule.js的输出接口，可以解构获得。

如果模块有default输出接口，可以用参数直接获得。

import('./myModule.js')
.then(myModule => {
  console.log(myModule.default);
});

上面的代码也可以使用具名输入的形式。

import('./myModule.js')
.then(({default: theDefault}) => {
  console.log(theDefault);
});

如果想同时加载多个模块，可以采用下面的写法。

Promise.all([
  import('./module1.js'),
  import('./module2.js'),
  import('./module3.js'),
])
.then(([module1, module2, module3]) => {
   ···
});

import()也可以用在 async 函数之中。

async function main() {
  const myModule = await import('./myModule.js');
  const {export1, export2} = await import('./myModule.js');
  const [module1, module2, module3] =
    await Promise.all([
      import('./module1.js'),
      import('./module2.js'),
      import('./module3.js'),
    ]);
}
main();

import()方法详细介绍参考：https://es6.ruanyifeng.com/#docs/module

总结

到此这篇关于vue如何动态加载组件的文章就介绍到这了,更多相关vue动态加载组件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue如何动态加载组件详解

本文链接: https://www.lsjlt.com/news/169716.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • vue如何动态加载组件详解
    目录使用场景：需要动态导入组件的页面核心组件的代码：使用场景：总结使用场景： 项目中需要我们根据不同的业务需求呈现不同的业务场景，如果业务类型简单还好，直接全部引入判断即可，但随着我...
    99+
    2022-11-13
    vue 组件动态加载 vuejs动态加载组件 vue 加载组件
  • vue3动态加载组件以及动态引入组件详解
    目录1.问题2.分析3.最后总结1.问题 在做一个用vite构建的vue3项目时，动态拉取导入.vue页面，然后控制台一直有以下提示，页面也无法渲染出来。 2.分析 根据上面的报错...
    99+
    2023-03-23
    vue 动态加载组件 vue加载组件 vue3动态加载组件
  • vue components 动态组件详解
    目录总结总结数组发生变化时，动态加载相应数据 场景：点击不同组件名称，界面显示相应组件 步骤一：导入所需组件 步骤二：点击 tab 选项卡，将对应组件名添加进数组 步骤三：使用动态组...
    99+
    2022-11-12
  • Vue加载中动画组件使用方法详解
    本文实例为大家分享了Vue加载中动画组件的使用，供大家参考，具体内容如下 （模仿ant-design加载中样式）效果图如下： ①创建Loading.vue组件： <templ...
    99+
    2022-11-13
  • 详解Vue3如何加载动态菜单
    目录1. 整体思路2. 实现细节2.1 加载细节2.2 getInfo2.3 generateRoutes1. 整体思路 首先我们来梳理下整体上的实现思路，首先一点：整体思路和 vh...
    99+
    2022-11-13
  • Vue动态组件和keep-alive组件实例详解
    目录动态组件格式注意点使用效果目录结构操作效果小结keep-alive组件使用背景解决方法使用keep-alive组件小结keep-alive组件-指定缓存语法注意：总结动态组件 多...
    99+
    2022-11-13
  • angular9中如何实现组件动态加载
    这篇文章将为大家详细讲解有关angular9中如何实现组件动态加载，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。指令的创建在添加组件之前，先要定义一个锚点来告诉 Angular 要把组件插入到什么地方。 ...
    99+
    2023-06-14
  • Vue动态组件与异步组件超详细讲解
    目录何为动态组件何为异步组件示例解析动态组件异步组件总结何为动态组件 动态组件是根据数据的变化，可以随时切换不同的组件，比如咱们现在要展示一个文本框和输入框，我们想要根据我们data...
    99+
    2023-03-19
    Vue动态组件与异步组件 Vue动态组件 Vue异步组件
  • Vue加载中动画组件如何使用
    这篇文章主要介绍“Vue加载中动画组件如何使用”，在日常操作中，相信很多人在Vue加载中动画组件如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue加载中动画组件如何使用”的疑惑有所帮助！接下来，请跟...
    99+
    2023-06-29
  • vue加载天气组件使用方法详解
    本文实例为大家分享了vue加载天气组件的使用方法，供大家参考，具体内容如下 首先我们进入中国天气网生成一段代码 根据需要设置天气样式 复制并修改生成的这段代码到vue中 将scr...
    99+
    2022-11-12
  • vue3动态加载组件及动态引入组件怎么使用
    本篇内容介绍了“vue3动态加载组件及动态引入组件怎么使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！1.问题在做一个用vite构建的vu...
    99+
    2023-07-05
  • 详解Angular动态组件
    目录使用场景怎么实现一、动态组件放在哪二、怎么获取组件的实例使用场景 我们先明确下动态组件的使用场景，在代码运行时要动态加载组件，换成普通人话，代码需要根据具体情况（比如用户的操作，...
    99+
    2022-11-12
  • vue.js 动态组件详解
    :is 动态组件 使用 v-bind:is=”组件名”，会自动去找匹配的组件名，如果没有，则不显示； <div id="app"> <test v-bi...
    99+
    2022-11-12
  • Vue中form表单动态如何添加组件
    这篇文章给大家分享的是有关Vue中form表单动态如何添加组件的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。效果如下:这种效果实现其实就是对 v-for 指令的一种使用，组件不是...
    99+
    2022-10-19
  • Android动态加载Activity原理详解
    activity的启动流程 加载一个Activity肯定不会像加载一般的类那样，因为activity作为系统的组件有自己的生命周期，有系统的很多回调控制，所以自定义一个DexC...
    99+
    2022-06-06
    activity Android
  • Angular.js怎么实现动态加载组件
    小编给大家分享一下Angular.js怎么实现动态加载组件，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！前言有时候需要根据URL...
    99+
    2022-10-19
  • 如何动态加载JavaScript文件
    这篇文章主要介绍如何动态加载JavaScript文件，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！一、使用document.write/writeln(）方式该种方式可以实现js文件...
    99+
    2022-10-19
  • 详解如何在Vue中动态添加类名
    目录静态和动态类有条件的类名使用数组语法使用对象语法与自定义组件一起使用快速生成类名使用计算属性来简化类能够向组件添加动态类名是非常强大的功能。它使我们可以更轻松地编写自定义主题，根...
    99+
    2022-11-13
  • 如何解决Vue中SSR组件加载问题
    这篇文章主要介绍如何解决Vue中SSR组件加载问题，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！Node 端渲染提示 window/document 没有定义业务场景首先来看一个简单...
    99+
    2022-10-19
  • VUE路由动态加载如何实现
    这篇文章主要讲解了“VUE路由动态加载如何实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“VUE路由动态加载如何实现”吧！首先新建vue工程，一般我们不会特殊处理路由，但当项目页面越来越多...
    99+
    2023-07-04
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作