vue3多个页面/组件，复用同一段render页面根据接口返回的数据动态渲染逻辑，使用setup+组合式API

组件reusableComponent是可供多个组件复用的
getData请求接口，render渲染数据

<template><render />
</template>
<script setup>
import operationService from "@/views/operation/component/operationService.vue";const props = defineProps({name: {type: String,default: "operation"}
});const { name } = toRefs(props);import baffle from "@/hooks/baffle";
import { dpSeatDrapMapList } from "@/api/commonApi";
import {ref,onMounted,nextTick,h,toRefs,getCurrentInstance,withScopeId
} from "vue";
onMounted(() => {nextTick(() => {init();getData();});
});const getData = async () => {let res = await dpSeatDrapMapList({pageSize: "1000",pageNo: "1"});pageData.value = res.result.records;/*返回的示例：{"success":true,"message":"查询成功！","code":200,"result":{"records":[{"drapId":"1888858684486922242","regOper":"admin","updateDate":null,"drapType":"operation","drapAttr":"operation2","regDate":"2025-02-10 15:52:58","drapY":"0","drapW":"12","drapX":"12","drapH":"13","updateOper":null,"drapText":"接通率/服务水平"},,{"drapId":"1888858684486922243","regOper":"admin","updateDate":null,"drapType":"operation","drapAttr":"operation2","regDate":"2025-02-10 15:52:58","drapY":"0","drapW":"12","drapX":"0","drapH":"13","updateOper":null,"drapText":"运营服务总览"},{"drapId":"1889145339345186818","regOper":"","updateDate":null,"drapType":"operation","drapAttr":"operation3","regDate":"2025-02-11 10:52:02","drapY":"0","drapW":"12","drapX":"0","drapH":"15","updateOper":null,"drapText":"今日服务之星"},{"drapId":"1889145340599283714","regOper":"","updateDate":null,"drapType":"operation","drapAttr":"operation3","regDate":"2025-02-11 10:52:02","drapY":"15","drapW":"12","drapX":"0","drapH":"19","updateOper":null,"drapText":"客户情绪意图"},{"drapId":"1889145340611866626","regOper":"","updateDate":null,"drapType":"operation","drapAttr":"operation3","regDate":"2025-02-11 10:52:02","drapY":"15","drapW":"12","drapX":"12","drapH":"19","updateOper":null,"drapText":"客户热词云图"},{"drapId":"1889149440623718401","regOper":"","updateDate":null,"drapType":"operation","drapAttr":"operation3","regDate":"2025-02-11 11:08:20","drapY":"0","drapW":"12","drapX":"12","drapH":"15","updateOper":null,"drapText":"今日客户来电问题TOP5"},{"drapId":"1888770651225862146","regOper":"admin","updateDate":"2025-02-12 16:19:50","drapType":"operation","drapAttr":"operation1","regDate":"2025-02-10 10:03:09","drapY":"8","drapW":"12","drapX":"12","drapH":"11","updateOper":"","drapText":"VIP客户来电详情"},{"drapId":"1888770651263610882","regOper":"admin","updateDate":"2025-02-12 16:20:19","drapType":"operation","drapAttr":"operation1","regDate":"2025-02-10 10:03:09","drapY":"19","drapW":"24","drapX":"0","drapH":"14","updateOper":"","drapText":"外呼数据"},{"drapId":"1888770651192307713","regOper":"admin","updateDate":"2025-02-12 16:20:19","drapType":"operation","drapAttr":"operation1","regDate":"2025-02-10 10:03:09","drapY":"33","drapW":"24","drapX":"0","drapH":"15","updateOper":"","drapText":"三渠道客户等待情况"},{"drapId":"1889925330341277697","regOper":"","updateDate":null,"drapType":"satisfaction","drapAttr":"satisfaction","regDate":"2025-02-13 14:31:26","drapY":"0","drapW":"6","drapX":"0","drapH":"30","updateOper":null,"drapText":"参评率分析"},...更多数据]}}*/// console.table(pageData.value);
};
import { useCommonStore } from "@/store/modules/common";const render = () => {const store = useCommonStore();//接口数据未返回的时候，页面loading，if (!notEmptyArray(pageData.value)) {store.startLoading();console.log("加载中");return h("div", "");} else {//接口数据有了之后，渲染页面//接口数据中drapAttr标识归属于哪个页面，operation2是页面代号，name是父组件传递的要渲染的页面的代号，筛选对应的数据，就是要渲染的组件集合。数据drapText是组件的标识（transObj变量），根据这个来决定组件数组（componentsArray变量）中哪些组件被渲染let pageList = pageData.value.filter(item => {return item.drapAttr && item.drapAttr === name.value;});//初始化空的虚拟节点数组let VNodeList = [];//解析每个模块的宽高 位置并将待渲染的style对象返回，"drapY":"0","drapW":"12","drapX":"12","drapH":"13"分别代表y x width height //因为数据来源页面用了vue-grid-layout，生成的数据都是layout: [//           {"x":0,"y":0,"w":2,"h":2,"i":"0"},//           {"x":2,"y":0,"w":2,"h":4,"i":"1"},//       ],这样的代表位置和宽高，把一个单位的宽高代表的实际长度换算清楚后，渲染到页面上let pageNameSet = new Set(pageList.map(compare));const calcW = w => w * 3.993 + "vw";const calcH = h => h * 1.791 + "vh";const getStyle = name => {let infoArr = pageList.filter(item => {return item.drapText === name;});let infoObj = {};if (notEmptyArray(infoArr)) {infoObj = infoArr[0];}const { drapW, drapH, drapX, drapY } = infoObj;return {width: calcW(drapW),height: calcH(drapH),position: "absolute",left: calcW(drapX),top: calcH(drapY),padding: "5px",boxSizing: "border-box"};};let transObj = {VIPCustomer: "VIP客户来电详情",//...待渲染的页面子组件与接口返回的数据的映射关系}let componentsArray = [VIPCustomer,//...待渲染的页面子组件]//根据接口返回的数据，筛选属于name的pageNameSet后，过滤出属于pageNameSet的组件并返回const getVNode = (name, componentName) => {if (pageNameSet.has(name)) {return h("div",{style: getStyle(name)},[h(componentName, { translateObj: translateObj.value })]);}};//过滤出属于pageNameSet的组件并压入VNodeList虚拟dom数组，待渲染componentsArray.map(item => {if (transObj[item.__name] && getVNode(transObj[item.__name])) {VNodeList.push(getVNode(transObj[item.__name], item));}});//结束页面loadingstore.finishLoading();//使用VNodeList渲染页面return h("div",{ class: "operation1_body operation1" },h("div", { class: "operation1_content" }, VNodeList));}
};
</script>
<style lang="less" >
.operation1_body {margin: 2vh auto 0 !important;// display: grid;width: 95.8vw;// grid-template-columns: 1fr 1fr;// grid-row-gap: 1vh;// grid-column-gap: 1vh;background: #001c5c;
}
.operation1_content {position: relative;width: 100%;height: 100%;
}</style >

父页面使用组件并传name进去渲染指定的页面

<template><div><reusableComponent :name="name" /></div>
</template>
<script setup>
import reusableComponent from "@/components/reusableComponent";
import { ref } from "vue";
const name = ref("sit2");//operation/sit/sit3/sit2/operation1/operation2这些页面可供渲染
</script>
<style lang="less" scoped>
.tbody {margin: 2vh auto 0;display: grid;width: 95.8vw;	background: #001c5c;
}
</style>