Vue3中组件props与逻辑相同但模板差异大时的最佳复用方案

核心思路 #

这种场景的核心是把通用逻辑和差异化视图彻底拆分开，别硬把所有模板塞在一个组件里用v-if堆条件判断，既臃肿又难维护。

具体可行方案 #

1. Composable + 独立UI组件（最推荐） #

这完全贴合Vue3组合式API的设计思路，把通用逻辑抽成可复用的composable，每个UI组件只负责自己的视图渲染：

• 第一步，抽离通用逻辑：

  // useMetricLogic.js
  export function useMetricLogic(props) {
    // 统一处理数据格式
    const formattedValue = computed(() => formatNumber(props.value));
    // 通用点击/交互逻辑
    const handleClick = () => { /* 比如上报埋点、跳转详情页 */ };
    return { formattedValue, handleClick };
  }
  

• 第二步，针对不同视觉样式写独立UI组件：

  <!-- MetricCard.vue -->
  <template>
    <div class="metric-card">
      <h3>{{ title }}</h3>
      <p class="big-number">{{ formattedValue }}</p>
      <button @click="handleClick">查看详情</button>
    </div>
  </template>
  
  <script setup>
  import { useMetricLogic } from './useMetricLogic';
  const props = defineProps(['title', 'value']);
  const { formattedValue, handleClick } = useMetricLogic(props);
  </script>
  

  <!-- MetricChart.vue -->
  <template>
    <div class="metric-chart">
      <line-chart :data="formattedValue" />
      <span class="chart-label">{{ title }}</span>
    </div>
  </template>
  
  <script setup>
  import { useMetricLogic } from './useMetricLogic';
  const props = defineProps(['title', 'value']);
  const { formattedValue } = useMetricLogic(props);
  </script>
  

• 如果需要更灵活的视图组合，还可以给基础组件加插槽，让父组件自定义部分内容：

  <!-- BaseMetric.vue -->
  <template>
    <div class="base-metric">
      <!-- 插槽可接收逻辑层处理好的数据 -->
      <slot name="header" :formattedValue="formattedValue" />
      <slot name="content" />
    </div>
  </template>
  
  <script setup>
  import { useMetricLogic } from './useMetricLogic';
  const props = defineProps(['value']);
  const { formattedValue } = useMetricLogic(props);
  </script>
  

2. 动态模板选择机制（适合视图类型固定的场景） #

如果你的差异化视图只有有限几种固定类型，可以在基础组件里用component动态切换UI组件，同时复用逻辑：

<!-- DynamicMetric.vue -->
<template>
  <component 
    :is="targetComponent" 
    :title="title" 
    :value="value" 
  />
</template>

<script setup>
import MetricCard from './MetricCard.vue';
import MetricChart from './MetricChart.vue';
import { useMetricLogic } from './useMetricLogic';

const props = defineProps(['title', 'value', 'type']);
// 复用通用逻辑
const { formattedValue } = useMetricLogic(props);

const targetComponent = computed(() => {
  switch(props.type) {
    case 'card': return MetricCard;
    case 'chart': return MetricChart;
    default: return MetricCard;
  }
});
</script>

这种方式适合视图类型不多的场景，父组件只需要传个type就能切换样式，不用管内部逻辑。

3. 高阶组件（HOC，Vue中较少用但可行） #

Vue里不像React那样常用HOC，但也可以通过函数返回组件的方式实现逻辑复用：

// withMetricLogic.js
export function withMetricLogic(Component) {
  return {
    props: ['title', 'value'],
    setup(props) {
      const { formattedValue, handleClick } = useMetricLogic(props);
      return () => h(Component, {
        title: props.title,
        formattedValue,
        handleClick
      });
    }
  };
}

使用时把UI组件套进去就行，不过Vue3的组合式API已经能更直观地解决问题，所以这种方式现在用得不多。

方案对比 #

• Composable + 独立UI组件：最灵活，逻辑和视图完全解耦，各自维护起来都方便，是Vue3场景下的首选。
• 动态模板选择：适合视图类型固定的场景，简化父组件调用，但要加新视图就得修改基础组件的判断逻辑。
• HOC：兼容Vue2，但Vue3里不如composable直观，代码可读性稍差。

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