jeecgBootUniapp/src/pages-process/components/DynamicLink.vue

<!-- component标签可以变换组件 -->
<template>
	<component :is="asyncComponent" :formData="formData" :history="history" :activeKey="activeKey" v-if="asyncComponent"
		@getStampSuc="getStampSuccess"></component>
</template>
<script setup lang="ts">
	import { ref, reactive, onMounted, computed, watch, nextTick } from 'vue';
	const compName = ref('');
	const asyncComponent = ref(null);
	const modules = import.meta.glob('/src/pages-bpm/**/*.vue');


	defineOptions({
		name: 'DynamicLink',
		options: {
			styleIsolation: 'shared',
		},
	})
	const props = defineProps({
		path: {
			type: String,
			default: ""
		},
		history: {
			type: String,
			default: ""
		},
		activeKey: {
			type: String,
			default: ""
		},
		formData: {
			type: Object,
			default: () => { },
		}

	})
	// 监听 option 变化
	watch(() => props.path, (newVal) => {
		if (newVal) compName.value = newVal;
		//动态加载页面
		const comp = modules[`/src/pages-bpm/${compName.value}.vue`]
		comp().then((myModule) => {
			asyncComponent.value = myModule.default
		}).catch(() => {
		
		})
	}, {
		deep: true,
		// #ifdef MP-WEIXIN
		immediate: true
		// #endif
	});


	const getStampSuccess = (val) => {
		// this.$emit('getStampSuc', val)
		// //在<component>标签动态组件使用vuex，没有保存成功。
		// //所以先传出来再试一下
		// this.$store.commit("cache/setEsignTags", { 
		//   esignTag: val
		// });
	}
</script>

<style lang="scss" scoped>

</style>