组件按需注册,根据版本号目录加载相应组件
发布于 3 年前 作者 clubadmin 990 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

需求是有很多工单表单,由于业务经常变化,所以每种工单隔段时间就会增减一些表单字段,要求在工单详情里面可以正常显示修改过的各个版本的工单内容,由此想在每条请求的工单数据数据里面加上一个“版本号”请求体可以是{“order_id”: 1, "iphone": "xxxxx", "version": "20191209"}这种,然后加载对应的目录下的组件() => import('../components/order/${this.version}')或者require.context('../components'+version, true, /\w+\.(vue)$/),但是我不知道该如何在组件内部动态注册组件。
目录结构如下:
image

<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

   })
 }
}
回到顶部