组件按需注册,根据版本号目录加载相应组件
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
需求是有很多工单表单,由于业务经常变化,所以每种工单隔段时间就会增减一些表单字段,要求在工单详情里面可以正常显示修改过的各个版本的工单内容,由此想在每条请求的工单数据数据里面加上一个“版本号”请求体可以是{“order_id”: 1, "iphone": "xxxxx", "version": "20191209"}
这种,然后加载对应的目录下的组件() => import('../components/order/${this.version}')或者require.context('../components'+version, true, /\w+\.(vue)$/)
,但是我不知道该如何在组件内部动态注册组件。
目录结构如下:
<template>
<div class="order">
<component :is="orderKey" :is-show="false" :is-disable="true" />
</div>
</template>
<script>
#在script标签下面无法获取 this.$route.params.id参数,导致不能在此进行请求
const requireComponent = require.context('../components/OrderForm/'+ version, true, /\w+\.(vue)$/)
var cmps = {}
requireComponent.keys().map(fileName => {
const cmp = requireComponent(fileName).default
cmps[cmp.name] = cmp
})
export default {
name: 'OrderHandle',
components: cmps,
data() {
return {
orderId: null,
orderKey: null,
version: null,
}
},
created() {
fetchOrder({ order_id: this.$route.params.id }).then(response => {
#created获取了version但是已经不能在注册组件类似this.$component.push(() => import('../components/order/${this.version}'))
this.orderId= response.data.orderId
this.orderKey= response.data.orderKey
this.version= response.data.version
})
}
}