vue动态引入注册子组件

357 阅读1分钟

如上图这样引入多个子组件很繁琐,且不满足需要根据后台传入的数组动态引入子组件的需求,以下开始介绍如何动态引入子组件:

假设后台传入的所需引入数组为:

对此数组进行遍历:

通过上述代码即可动态引入子组件并挂载在div节点上

注:

为什么在require后要加个default 我们通常写 .vue 单文件组件时,在 script 语言块中使用的是 ES6 的语法,使用 export default 进行默认导出。 require 是 CommonJS(和 AMD,想不到吧?)的模块导入方式,不支持模块的默认导出,因此导入的结果其实是一个含 default 属性的对象,因此需要使用 .default 来获取实际的组件选项。或者使用 ES6 的 import 语句,import 时需要给定一个变量名,所有 import 语句必须统一放在模块的开头。

如果 .vue 文件中使用的本来就是 CommonJS 或者 AMD 的模块化系统语法,导出的是 module.exports 对象作为组件选项,那么使用 require 导入时就不需要使用 .default 来获取。