Vue 3中能否将组件作为对象属性并在模板中渲染？

完全可以将组件作为对象属性存储，但你当前模板里用{{ route.icon }}的写法是错误的——插值表达式只能渲染文本内容，没法直接渲染组件。要实现动态渲染组件，你需要用Vue提供的动态组件语法：<component :is="组件实例/定义" />。

具体修正步骤： #

1. 你的TS接口定义是没问题的，Component类型可以正确标记组件属性：

import type { Component } from 'vue'

interface Route {
    url: string
    icon: Component
    name: string
}

2. 模板里把插值表达式替换为动态组件标签：

<div v-for="route in routes" :key="route.url">
  <!-- 用动态组件渲染icon属性对应的组件 -->
  <component :is="route.icon" />
  <span>{{ route.name }}</span>
</div>

3. 示例完整代码（包含组件定义和路由数组）：

<script setup lang="ts">
import type { Component } from 'vue'
import HomeIcon from './icons/HomeIcon.vue'
import UserIcon from './icons/UserIcon.vue'

interface Route {
    url: string
    icon: Component
    name: string
}

const routes: Route[] = [
  { url: '/', icon: HomeIcon, name: '首页' },
  { url: '/profile', icon: UserIcon, name: '个人中心' }
]
</script>

<template>
  <div v-for="route in routes" :key="route.url" class="route-item">
    <component :is="route.icon" />
    <span>{{ route.name }}</span>
  </div>
</template>

额外说明： #

• 如果你的组件是异步导入的，比如const SettingsIcon = () => import('./icons/SettingsIcon.vue')，动态组件同样支持这种写法，直接把异步组件赋值给icon属性即可。
• 记得给v-for加上唯一的key值，符合Vue的性能优化要求。

内容的提问来源于stack exchange，提问作者oluwakayode