vue组件的动态挂载

毛三仙

已于 2023-11-10 11:27:33 修改

阅读量107

点赞数

分类专栏： vue基础 vue项目中常用操作组件封装文章标签：前端 vue.js

于 2023-11-06 15:53:36 首次发布

本文链接：https://blog.csdn.net/m0_74149462/article/details/134248131

版权

vue项目中常用操作同时被 3 个专栏收录

38 篇文章 0 订阅

订阅专栏

vue基础

20 篇文章 0 订阅

订阅专栏

组件封装

14 篇文章 1 订阅

订阅专栏

        <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()
  },

uniApp中使用如下

<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>