使用import和require动态请求vue组件

使用import和require动态请求vue组件

需求

1. 需要在js中动态加载vue组件，组件名称由后端提供，组件存放在前端代码中

   实现

2. ES5的require的方式

   // url代表组件名
   this.componenetName = require('../component-list/basic/' + url).default

3. ES6的import方式

   this.componenetName = require(url)
   import('../component-list/basic/' + url).then((res) => {
    this.componenetName = res.default
   })

   总结

   请求普通组件时，会将请求回来的组件存放在default中
   
   如果请求的是第三方框架比如element-plus，就会是一个对象集合返回所有组件，如下图
   

注：想要获取更多前端知识可以关注博主哦 ~