能否通过Props传递组件？以Hero Icon组件传递为例

当然可以把插槽内容改成Props传递，Hero Icon这类组件本质就是框架的组件对象/函数，直接作为Props传递即可，下面分Vue和React两种常用场景给出实现：

Vue 3 实现方式 #

1. 修改NavigationItem组件，接收组件类型的Props #

<template>
  <div class="navigation-item">
    <!-- 使用Vue的动态组件渲染传入的图标组件 -->
    <component :is="icon" class="w-6" />
    <span>{{ label }}</span>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  // 图标组件，类型为Object（Vue单文件组件的导出类型）
  icon: {
    type: Object,
    required: true
  },
  // 导航文本
  label: {
    type: String,
    required: true
  }
})
</script>

2. 使用时直接传入图标组件 #

<template>
  <NavigationItem :icon="TicketIcon" label="Link One" />
</template>

<script setup>
// 导入需要的Hero Icon组件
import TicketIcon from '@heroicons/vue/24/outline/TicketIcon'
import NavigationItem from './NavigationItem.vue'
</script>

React 实现方式 #

1. 修改NavigationItem组件，接收组件类型的Props #

function NavigationItem({ Icon, label }) {
  return (
    <div className="navigation-item">
      {/* 直接渲染传入的图标组件（React组件本质是函数，大写开头区分） */}
      <Icon className="w-6" />
      <span>{label}</span>
    </div>
  )
}

export default NavigationItem

2. 使用时直接传入图标组件 #

import TicketIcon from '@heroicons/react/24/outline/TicketIcon'
import NavigationItem from './NavigationItem'

function App() {
  return (
    <NavigationItem Icon={TicketIcon} label="Link One" />
  )
}

进阶：批量生成导航项 #

这种Props传递的方式特别适合批量生成导航，只需定义一个导航配置数组即可：

Vue示例 #

<template>
  <div class="navigation-list">
    <NavigationItem
      v-for="item in navItems"
      :key="item.label"
      :icon="item.icon"
      :label="item.label"
    />
  </div>
</template>

<script setup>
import TicketIcon from '@heroicons/vue/24/outline/TicketIcon'
import HomeIcon from '@heroicons/vue/24/outline/HomeIcon'
import NavigationItem from './NavigationItem.vue'

const navItems = [
  { icon: HomeIcon, label: '首页' },
  { icon: TicketIcon, label: 'Link One' }
]
</script>

React示例 #

import TicketIcon from '@heroicons/react/24/outline/TicketIcon'
import HomeIcon from '@heroicons/react/24/outline/HomeIcon'
import NavigationItem from './NavigationItem'

function App() {
  const navItems = [
    { Icon: HomeIcon, label: '首页' },
    { Icon: TicketIcon, label: 'Link One' }
  ]

  return (
    <div className="navigation-list">
      {navItems.map(item => (
        <NavigationItem key={item.label} {...item} />
      ))}
    </div>
  )
}

如果需要给图标传递额外属性（比如颜色、尺寸），可以在NavigationItem组件中添加对应的Props透传，比如Vue中用v-bind，React中直接传递属性给图标组件即可。

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