如何动态导入组件

如何动态导入组件

---

前言

当一个页面要导入很多组件，并且每个组件都是独立的的时候，可以考虑使用动态组件，就不用那么多次的重复填写。

---

1. html部分

首先，在html部分使用compoent标签，使用is绑定你给动态组件赋予的值，它是一个字符串类型

<component :is="component.name"></component>

2. js部分

首先要明白，动态组件再怎么动态，也需要有个来源，所以你还需要导入需要引用的组件并注册，假设我有个a.vue组件，我要在b组件导入，所以我需要在b组件先import导入并注册，然后在你需要获得组件并创建的地方编写方法获取组件即可

import a from './a.vue'; // 具体看你需要导入的组件
export default {
    
    
	component: {
    
    a},
	data() {
    
    
		return {
    
    
			component: {
    
    },
		}
	},
	// 具体位置看你需要在哪里导入
	created() {
    
    
		var name = 'a'; // 这个a是我想导入的组件，所以赋值a，若是从后端获取，则修改为后端获取的值即可
		var myComponent =() => import('./components/' + name + '.vue');
		this.component={
    
    
			name:name,
			component:myComponent
		}
	}
}

至此及可完成

还有一种require的方式，下次补充

---

注意点

不管组件再怎么动态，终归会有个来源，故import和component的步骤还是必须要写的，不然组件找不到来源