Dynamic mounting of vue components

 

 

 

 

 

        <component :is="whatComp"></component>
  data() {
    return {
      whatComp: null
    };
  },

  getComp() {
      let type = JSON.parse(localStorage.getItem("chooseTreeObj")).columnType
      let who = type ? type : "Null"
      this.whatComp = require('@/views/portalManage/content/unit/formUnit/cmsColumnType'
        + who + ".vue").default
    },

  created() {
    this.getComp()
  },

Used in uniApp as follows

<template>
	<view class="wrap">
		<component :is="comDialog" :sendData='sendData'> </component>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				comKey: '',
				comDialog: '',
				sendData: {
					deployId: '', //流程id
					isTaskApproval: '', //是否需要审核  1:不需要 0:需要
					isEdit: true, // 是否编辑
				}
			}
		},
		onLoad(option) {
			this.comKey = option.name
			this.sendData.deployId = option.id
			this.sendData.isTaskApproval = option.isAudit
			//this.comKey = 'leave'
			this.comDialog = require('@/components/workComponents/form/' + this.comKey + '/' + this.comKey + '.vue')
				.default
		},
		methods: {

		}
	}
</script>
<style lang="scss" scoped>

</style>