Vue received a Component that was made a reactive object. This can lead to unnecessary performance o

vue3 +ts 项目 写路由菜单的时候菜单的子菜单显示不出来并且控制台报警告

以下为控制台报的警告
vue3+vite+ts 报错
Vue received a Component that 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. Component that was made reactive:

这是 错误示范的代码

<template>
	<template v-for="item in navMenus">
		<el-menu-item
			v-if="!(item.children && item.children.length > 0)"
			:key="item.path"
			:index="item.path"
		>
			<template #title>
				<component :is="item.icon" class="icons"></component>
				<span>{{ item.label }}</span>
			</template>
		</el-menu-item>
		<el-sub-menu v-else :index="item.path" id="item.path">
			<template #title>
				<component :is="item.icon" class="icons"></component>
				<span>{{ item.label }}</span>
			</template>
			<navMenus :navMenus="item.children"></navMenus>
		</el-sub-menu>
	</template>
</template>

<script setup>
defineProps(["navMenus"]);
</script>
<script>
export default {
	name: "navMenus",
};
</script>
<style scoped>
.icons {
	width: 18px;
	margin-right: 10px;
}
</style>

解决方法 ： 给此组件另取的名字和 defineProps 传递的 navMenus 的名字冲突了 改个名字就好了

<template>
	<template v-for="item in navMenus">
		<el-menu-item
			v-if="!(item.children && item.children.length > 0)"
			:key="item.path"
			:index="item.path"
		>
			<template #title>
				<component :is="item.icon" class="icons"></component>
				<span>{{ item.label }}</span>
			</template>
		</el-menu-item>
		<el-sub-menu v-else :index="item.path" id="item.path">
			<template #title>
				<component :is="item.icon" class="icons"></component>
				<span>{{ item.label }}</span>
			</template>
			<navMenusItems :navMenus="item.children"></navMenusItems>
		</el-sub-menu>
	</template>
</template>

<script setup>
defineProps(["navMenus"]);
</script>
<script>
export default {
	name: "navMenusItems",
};
</script>
<style scoped>
.icons {
	width: 18px;
	margin-right: 10px;
}
</style>