将公司的项目重构时,踩了个动态组件的坑,特地记录一下
<template>
<component
ref="formComponent"
:is="formComponent"
/>
</template>
<script setup lang='ts'>
const mapComp: any = {
Record
};
const formComponent = computed(() => {
return mapComp[route.params.type as keyof typeof mapComp];
});
</script>
然后浏览器报出两个警告
开始的时候还没有意识到是component的computed问题,一直在syncOperateButton
这个函数里面找问题,最后误打误撞看到 官网例子 才反应过来是component的computed问题
修改后:
<template>
<component
ref="formComponent"
:is="mapComp[route.params.type as string]"
/>
</template>
<script setup lang='ts'>
import {useRoute} from 'vue-router'
const route = useRoute()
const mapComp: any = {
Record
};
const formComponent = ref<string>(route.params.type as string);
</script>
至此问题就解决了
官方例子:https://sfc.vuejs.org/#eNqNVNFu2yAU/RXkPqSVYrtdpz2wpFrf9riHvdXTRDBOaG1AgNNWUf59B3BcZ13WxFLEvfdwOOfa3F12b0yx7UVGs4XjVhpPnPC9uauU7Iy2nnzXnSCN1R2ZFWUIAnw2ln9o591Yj9Ex4N7yjdy+UQzxMWhHrGjIfgClEqkU18p5wntrhfI/2YosA+5yFmTMrip1QHi2cqjtsCnqnYdF1BJXw5GV2ldqUSabMIjAi860zAtEhCxquSW8Zc4tq6wWna6ymEdl1XuvsSEE+G3zRluALn/Pw9lXRKqoocpGCH0Sr0AgO00e2B9mKOSJdTaHfcY9FNIjr8tlICX7XxOGb7yV/AkMR02ZnjJIJmS3S9thOnoo03HBuEfINVqvQEGoDJKC/oc3Vhw69iLS3y3KcUtqV4l+YbUoJ11E6PxrG5ZFaGF6J41WPm9YJ9tXShxTLnfCyuZrqK20rYWl5Ma8EKdbWZMLIcSklFtWy95R8sm8xLRhdS3VGolr7LnFX0x3zK6lyr02IBPdNLfScN5R8vmA7XE+NLSCe0oUPMWs3grbtPo5f6GE9V4jiebBydvLSn5GBV8g4OZAOsiFgLwVjR91376vW7nenAIctYJzHkt4MU6jZLRUXtgEZ/xpbXWvakoumuvw/Mt0DrppPp49pmFwYo9uQg+SySN6cR2ed/gifbdnbBggpx2OPR36me5q/JayeZbmRN4xUzw6rTCuIl81FHDzaDoh5DA/QlxlG++No2XpGh7mzaMrtF2XWBW2V15ilgnX5Surn/E9gLjK4rwYOEok0Y0cNwKihf0f51/Qd7yBFo72sHKYoWHknp4/6c4lNXEEj5fvxN0D8zh9z6dO4/sM7snYPp/9MPs/5N//ARljNdU=