异步组件
前言
朋友前几天和我说，他那边有个需求，就是他这边本地会实现很多个组件，比如上传、表单、下拉等等。不过页面上具体要展示哪个组件，需要通过接口去后台获取，然后展示对应的组件。问我如何实现，我首先想到的就是异步组件
异步组件官方写法有好几种，不过我们用到的如下一种：
Vue.component(
'async-webpack-example',
// 这个 `import` 函数会返回一个 `Promise` 对象。
() => import('./my-async-component')
)
实现
知道怎么做后就方便许多了，先初始化一个vue项目，然后在components下新建a.vue、b.vue、c.vue三个组件，目录如下：
src
├── assets
├── components # 组件目录
├──── a.vue # 组件a
├──── b.vue # 组件b
├──── c.vue # 组件c
├──── HelloWorld.vue # 页面组件
├── App.vue # 模板入口文件
├── main.js # 项目入口
├── utils.js # 异步组件加载代码
a.vue、b.vue、c.vue中的结构都是简单结构：
<template>
<div>
component A/B/C
</div>
</template>
页面组件HelloWorld.vue的结构如下：
<template>
<div class="hello">
<h1>动态component</h1>
<button @click="loadComponent('a')">加载a组件</button>
<button @click="loadComponent('B')">加载b组件</button>
<button @click="loadComponent('C')">加载c组件</button>
<component :is="componentName"></component>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
componentName: ''
}
},
methods: {
loadComponent(component) {
// to load components
}
}
}
</script>
然后在utils.js中来实现具体的思路：
import Vue from 'vue'
/**
* 根据传入的组件名称 去动态创建组件
* @param {string} componentName 组件名称
*/
export function loadComponentSync(componentName) {
// 将组件名称全部转成小写
let name = componentName.toLowerCase()
// 异步加载组件
Vue.component(`x-${name}`, () => import(`./components/${name}.vue`))
// 将加载后的组件名称返回
return `x-${name}`
}
然后在HelloWorld.vue中引入，并在点击事件调用，动态修改componentName就行了，完整代码如下：
<template>
<div class="hello">
<h1>动态component</h1>
<button @click="loadComponent('a')">加载a组件</button>
<button @click="loadComponent('B')">加载b组件</button>
<button @click="loadComponent('C')">加载c组件</button>
<component :is="componentName"></component>
</div>
</template>
<script>
import { loadComponentSync } from '../utils.js'
export default {
name: 'HelloWorld',
data() {
return {
componentName: ''
}
},
methods: {
loadComponent(component) {
let a = loadComponentSync(component)
this.componentName = a
}
}
}
</script>
这样就完成了一个异步组件的加载了。
效果如下：
效果图
问题
不过问题也存在了，因为组件所接受的参数都不一定是相同的，虽然参数都可以挂载在component上，不过多了就不好维护了，连哪个参数是哪个组件的都容易分不清，但是如果写多个component的话，也觉得不适当，所以接受参数这块目前只能按个人习惯来做调整了。
