vue组件复用实现方案
Vue组件复用实现方案
使用Props进行数据传递
通过Props将数据从父组件传递到子组件，实现组件的动态渲染。子组件通过定义Props接收父组件的数据，确保组件在不同场景下的灵活性。
// 子组件
export default {
props: {
title: String,
count: Number
}
}<!-- 父组件 -->
<ChildComponent :title="pageTitle" :count="totalCount" />插槽（Slots）实现内容分发
利用插槽机制允许父组件向子组件插入自定义内容，实现UI结构的复用。具名插槽和作用域插槽可进一步扩展灵活性。
<!-- 子组件 -->
<div>
<slot name="header"></slot>
<slot :user="userData"></slot>
</div>
<!-- 父组件 -->
<ChildComponent>
<template v-slot:header>
<h1>自定义标题</h1>
</template>
<template v-slot:default="slotProps">
<p>{{ slotProps.user.name }}</p>
</template>
</ChildComponent>混入（Mixins）封装通用逻辑
通过混入对象共享组件选项如methods、created等生命周期钩子。适合复用跨组件的公共逻辑，但需注意命名冲突问题。
const formMixin = {
methods: {
validate() {
// 通用验证逻辑
}
}
}
export default {
mixins: [formMixin]
}渲染函数与函数式组件
使用渲染函数实现更高灵活性的模板生成，函数式组件适用于无状态组件复用，提升性能。
export default {
functional: true,
render(h, { props }) {
return h('div', props.data)
}
}高阶组件（HOC）模式
通过函数包裹组件生成增强型组件，实现逻辑复用。常见于权限控制、日志记录等场景。
function withLoading(WrappedComponent) {
return {
data() {
return { loading: false }
},
render(h) {
return h(WrappedComponent, {
props: { ...this.$attrs },
on: { ...this.$listeners }
})
}
}
}组合式API（Composition API）
Vue 3的setup函数允许将相关逻辑组织在一起，通过自定义Hook实现更清晰的逻辑复用。
// useCounter.js
export function useCounter() {
const count = ref(0)
const increment = () => count.value++
return { count, increment }
}
// 组件中使用
import { useCounter } from './useCounter'
export default {
setup() {
const { count, increment } = useCounter()
return { count, increment }
}
}组件库与模块化
将通用组件发布为独立npm包或私有模块，通过版本控制实现跨项目复用。配合Storybook等工具可提升可维护性。
动态组件与异步加载
通过<component :is>实现运行时组件切换，结合异步加载优化性能。
<component :is="currentComponent" />const AsyncComponent = () => import('./AsyncComponent.vue')
