本文介绍了如何在JavaScript中根据后端提供的组件名动态加载Vue组件。使用ES5的`require`和ES6的`import`方法，可以实现组件的按需加载。当请求普通组件时，组件保存在`default`属性中；如果是像Element Plus这样的第三方框架，返回的可能是一个包含所有组件的对象集合。想要了解更多前端知识，可以关注作者。
使用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，就会是一个对象集合返回所有组件，如下图
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
