使用import和require动态请求vue组件
需求
- 需要在js中动态加载vue组件,组件名称由后端提供,组件存放在前端代码中
实现
- ES5的
require
的方式
// url代表组件名
this.componenetName = require('../component-list/basic/' + url).default
- ES6的
import
方式
import('../component-list/basic/' + url).then((res) => {
this.componenetName = res.default
})
总结
请求普通组件时,会将请求回来的组件存放在default中
如果请求的是第三方框架比如element-plus,就会是一个对象集合返回所有组件,如下图