一、模板复用的核心价值与常见场景

在大型Vue项目中，模板复用是解决代码冗余、提升开发效率的重要手段。典型场景包括：

UI组件库开发：同一类组件（如按钮、卡片）需要支持多种样式和布局变体
动态表单生成：根据配置动态渲染不同类型的表单控件
布局系统构建：统一管理页面头部、侧边栏等公共布局区域
复杂交互组件：如可折叠面板、标签页等需要复用内部结构的组件

模板复用不仅能减少代码量，更重要的是：

保持UI一致性：确保相同功能在不同场景下表现一致
降低维护成本：修改一处即可同步更新所有使用实例
提升开发体验：通过组合而非重复编写实现功能扩展

二、基础复用技术：插槽机制详解

插槽（Slots）是Vue提供的最基础的模板复用机制，通过预留占位符实现内容分发。

1. 默认插槽与具名插槽

<!-- 基础卡片组件 Card.vue -->
<template>
  <div class="card">
    <div class="card-header">
      <slot name="header">默认标题</slot>
    </div>
    <div class="card-body">
      <slot>默认内容</slot>
    </div>
  </div>
</template>
<!-- 使用方式 -->
<Card>
  <template #header>
    <h2>自定义标题</h2>
  </template>
  <p>这是自定义内容</p>
</Card>

2. 作用域插槽：数据传递

当子组件需要向插槽内容传递数据时：

<!-- 数据列表组件 DataList.vue -->
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item" :index="index">
        {{ item.defaultText }}
      </slot>
    </li>
  </ul>
</template>
<!-- 使用方式 -->
<DataList :items="userList">
  <template #default="{ item, index }">
    <span>{{ index + 1 }}. {{ item.name }}</span>
  </template>
</DataList>

3. 动态插槽名

结合计算属性实现动态插槽：

<template>
  <div>
    <slot :name="currentSlot" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      slotType: 'primary'
    }
  },
  computed: {
    currentSlot() {
      return `content-${this.slotType}`
    }
  }
}
</script>

三、高级复用模式：动态组件与高阶组件

1. 动态组件：component元素

通过<component :is="currentComponent">实现组件动态切换：

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">A</button>
    <button @click="currentComponent = 'ComponentB'">B</button>
    <component :is="currentComponent" />
  </div>
</template>
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
export default {
  components: { ComponentA, ComponentB },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  }
}
</script>

2. 高阶组件（HOC）：函数式封装

通过函数返回增强后的组件：

// withLoading.js 高阶组件
export default function withLoading(WrappedComponent) {
  return {
    name: `WithLoading${WrappedComponent.name}`,
    props: WrappedComponent.props,
    data() {
      return {
        isLoading: false
      }
    },
    render(h) {
      return this.isLoading 
        ? h('div', ['Loading...'])
        : h(WrappedComponent, {
            props: this.$props,
            on: this.$listeners
          })
    },
    methods: {
      startLoading() {
        this.isLoading = true
      },
      stopLoading() {
        this.isLoading = false
      }
    }
  }
}
// 使用方式
import withLoading from './withLoading'
import MyComponent from './MyComponent.vue'
export default withLoading(MyComponent)

四、组合式API时代的复用方案

Vue 3的组合式API提供了更灵活的复用方式：

1. 自定义指令复用

// focus.js 自定义指令
export default {
  mounted(el) {
    el.focus()
  }
}
// main.js
import focus from './directives/focus'
app.directive('focus', focus)
// 使用方式
<input v-focus />

2. Composable函数

将可复用逻辑提取为函数：

// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'
export function useMouse() {
  const x = ref(0)
  const y = ref(0)
  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))
  return { x, y }
}
// 使用方式
import { useMouse } from './useMouse'
export default {
  setup() {
    const { x, y } = useMouse()
    return { x, y }
  }
}

五、最佳实践与性能优化

合理选择复用方式：
- 简单内容分发：优先使用插槽
- 组件切换：使用动态组件
- 逻辑复用：组合式API或高阶组件
避免过度抽象：
- 只在真正需要复用时进行抽象
- 保持组件职责单一
性能优化技巧：
- 对频繁更新的复用部分使用v-once
- 合理使用key属性优化列表渲染
- 避免在复用逻辑中创建过多响应式对象

类型安全（TypeScript）：

// 具名插槽类型定义
declare module 'vue' {
interface ComponentCustomProps {
 $slots: {
   header?: (props: { title: string }) => VNode[]
   default?: () => VNode[]
 }
}
}

六、常见问题解决方案

插槽内容访问组件数据：
- 使用作用域插槽
- 通过provide/inject传递数据
动态组件事件处理：
- 使用.native修饰符（Vue 2）或v-on="$listeners"
- Vue 3中直接通过emits选项声明
高阶组件的props冲突：
- 使用$attrs和$listeners透传属性
- 显式声明所有props
组合式API的测试：
- 将composable函数导出为独立模块
- 使用@vue/test-utils进行单元测试

通过系统掌握这些模板复用技术，开发者能够构建出更加灵活、可维护的Vue应用。在实际项目中，建议根据具体场景选择最适合的复用方案，并在复杂场景下结合多种技术实现最佳效果。

Vue组件模板复用：高效开发与代码优化的实践指南