如上图这样引入多个子组件很繁琐,且不满足需要根据后台传入的数组动态引入子组件的需求,以下开始介绍如何动态引入子组件:
假设后台传入的所需引入数组为:
对此数组进行遍历:
通过上述代码即可动态引入子组件并挂载在div节点上
注:
为什么在require后要加个default 我们通常写 .vue 单文件组件时,在 script 语言块中使用的是 ES6 的语法,使用 export default 进行默认导出。 require 是 CommonJS(和 AMD,想不到吧?)的模块导入方式,不支持模块的默认导出,因此导入的结果其实是一个含 default 属性的对象,因此需要使用 .default 来获取实际的组件选项。或者使用 ES6 的 import 语句,import 时需要给定一个变量名,所有 import 语句必须统一放在模块的开头。