Vue 3中如何复用同一组件并显示不同文本及性能优化建议

核心结论 #

复用同一组件+Props传参绝对是更优方案，不管是性能表现还是代码可维护性，都远胜于重复创建几乎相同的组件。

为什么复用组件性能更好？ #

• Vue组件的编译产物（render函数、虚拟DOM结构）只会生成一次，复用时仅创建不同的组件实例，实例共享组件的编译结果，不会重复加载编译组件代码，直接减少代码体积与编译开销。
• 若单独创建两个近乎一致的组件，本质是冗余代码，打包后会增加体积，反而拖慢页面加载速度。

如何用Props传递不同文本？ #

1. 定义组件的Props #

在你的图文组件（比如命名为ImageTextBlock.vue）中，声明需要接收的参数：

<template>
  <div class="image-text-block">
    <div class="text-content">{{ blockText }}</div>
    <img :src="imageSrc" alt="模块配图">
  </div>
</template>

<script setup>
defineProps({
  blockText: {
    type: String,
    required: true // 确保调用组件时必须传入文本
  },
  imageSrc: {
    type: String,
    required: true
  }
})
</script>

2. 在首页复用组件并传参 #

在首页组件中两次调用该组件，传入不同的文本和图片路径：

<template>
  <main>
    <ImageTextBlock 
      blockText="第一个模块的自定义文本" 
      imageSrc="/assets/first-block-img.jpg"
    />
    <ImageTextBlock 
      blockText="第二个模块的自定义文本" 
      imageSrc="/assets/second-block-img.jpg"
    />
  </main>
</template>

<script setup>
import ImageTextBlock from './components/ImageTextBlock.vue'
</script>

额外优化提示 #

• 如果需要支持长文本或富文本内容，可以将blockText的类型改为String | Object，配合v-html渲染（注意防范XSS风险）。
• 组件内的静态图片，Vue CLI会自动处理路径，直接写相对路径即可；远程图片则传入完整URL。

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