vue如何实现组件复用
组件复用的基本方法
在Vue中，组件复用主要通过以下几种方式实现，每种方式适用于不同的场景。
使用props传递数据 通过props将数据从父组件传递给子组件，子组件接收并渲染数据。这种方式适用于静态或动态数据的传递。
<template>
<ChildComponent :message="parentMessage" />
</template>
<script>
export default {
data() {
return {
parentMessage: 'Hello from parent'
}
}
}
</script>使用插槽（Slots） 插槽允许父组件向子组件插入内容，增强组件的灵活性。具名插槽可以更精确地控制插入位置。
<template>
<ChildComponent>
<template v-slot:header>
<h1>Header Content</h1>
</template>
</ChildComponent>
</template>高阶组件（HOC）与混入（Mixins）
混入（Mixins） 混入是一种分发Vue组件可复用功能的灵活方式。混入对象可以包含任意组件选项，组件将自动继承这些选项。
const myMixin = {
created() {
this.hello()
},
methods: {
hello() {
console.log('Hello from mixin!')
}
}
}
export default {
mixins: [myMixin]
}高阶组件（HOC） 通过函数包装组件，返回一个增强后的新组件。这种方式适合逻辑复用。
function withLogging(WrappedComponent) {
return {
mounted() {
console.log('Component is mounted')
},
render(h) {
return h(WrappedComponent, this.$attrs)
}
}
}渲染函数与函数式组件
渲染函数 通过JavaScript直接编写组件逻辑，适合动态生成复杂结构的场景。
export default {
render(h) {
return h('div', this.$slots.default)
}
}函数式组件 无状态、无实例的组件，性能更高。适合纯展示型组件。
<template functional>
<div>{{ props.message }}</div>
</template>组合式API（Composition API）
Vue 3的组合式API提供更灵活的代码组织方式，便于逻辑复用。
import { ref } from 'vue'
export function useCounter() {
const count = ref(0)
const increment = () => count.value++
return { count, increment }
}在组件中使用：
<template>
<button @click="increment">{{ count }}</button>
</template>
<script>
import { useCounter } from './useCounter'
export default {
setup() {
return useCounter()
}
}
</script>组件库与全局注册
全局注册组件
通过Vue.component全局注册组件，适合频繁使用的通用组件。
import Vue from 'vue'
import MyComponent from './MyComponent.vue'
Vue.component('MyComponent', MyComponent)构建组件库 将组件打包为独立的库，通过npm发布或直接引入项目中使用。
// 导出所有组件
export { default as Button } from './Button.vue'
export { default as Input } from './Input.vue'总结
Vue中组件复用的方式多样，可根据具体需求选择合适的方法。props和插槽适合简单场景，混入和高阶组件适合逻辑复用，组合式API提供更现代化的解决方案。全局注册和组件库适合规模化项目。
