Vue3 根据相对路径加载vue组件
一、设置动态组件加载器
1、"DynamicFormLoader.vue"
<template>
<div>
<component :is="formComponent" v-if="formComponent" />
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { defineProps } from 'vue';
// 定义组件属性,要求必须提供一个字符串类型的"path"属性
const props = defineProps({
path: {
type: String,
required: true
}
});
// 使用ref创建一个名为formComponent的引用,用于存储表单组件实例
const formComponent = ref(null);
// 监听props中的"path"属性的变化,当"path"变化时,动态导入相应的表单组件
watch(() => props.path, async (newPath) => {
// 当新的路径存在时,尝试导入对应的组件
if (newPath) {
try {
// 动态导入位于@/components/forms/目录下且文件名与 newPath 相同的 Vue 组件
const component = await import(`/${newPath}`);
// 将导入的组件赋值给formComponent引用
formComponent.value = component.default;
} catch (error) {
// 如果导入失败,打印错误信息并将formComponent设为null
console.error(`组件导入失败: ${newPath}`, error);
formComponent.value = null;
}
}
}, { immediate: true });
</script>
二、父组件
<DynamicFormLoader :path="loadedFormPath" />
在需要的地方引入这个组件就可以了,如果想要通过相对路径的方式加载对应的vue文件只需要,对loadedFormPath 进行赋值即可
子组件的路径:src/views/form/childen.vue
原文地址:https://blog.csdn.net/qq_57667629/article/details/140326091
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!