bug:组件不显示 vue2数据中的name是字符串,vue3因为特性原因name不可以是字符串
bug2:vue3中的 Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref` 解决方案看我下面代码就可以markRaw
<template>
<div>
<component
v-for="compName in listComp"
:key="compName.name"
:is="compName.name"
v-bind="compName"
>
</component>
</div>
</template>
<script setup>
import highwayroute from "./common/highwayRoute";
import crowdindex from "./common/crowdIndex";
import flowtrend from "./common/trend";
import {
reactive,
markRaw,
} from "vue";
const state = reactive({
listComp: [
{
id: 1,
name: highwayroute,
finedName: "highwayRoute",
com: markRaw(highwayroute),
},
{
id: 2,
name: crowdindex,
finedName: "crowdIndex",
data: [],
com: markRaw(crowdindex),
},
{
id: 3,
name: flowtrend,
finedName: "flowTrend",
data: [],
com: markRaw(flowtrend),
}
]
});
</script>
<style lang="scss" scoped></style>