vue重写组件实现
Vue 组件重写方法
重写 Vue 组件通常涉及对现有组件逻辑或结构的调整，以下是常见场景和实现方式：
继承与扩展
通过 extends 继承父组件并覆盖部分逻辑：
// ParentComponent.vue
export default {
methods: {
fetchData() {
return axios.get('/api/data')
}
}
}
// ChildComponent.vue
import ParentComponent from './ParentComponent'
export default {
extends: ParentComponent,
methods: {
fetchData() {
// 调用父组件方法并扩展
return super.fetchData().then(res => {
this.processData(res.data)
})
}
}
}高阶组件模式
使用渲染函数包裹原有组件：
function withLoading(WrappedComponent) {
return {
render(h) {
return h(WrappedComponent, {
props: this.$attrs,
on: this.$listeners,
scopedSlots: this.$scopedSlots
})
}
}
}组合式API重构
将选项式API改为组合式API：
// 旧版选项式
export default {
data() {
return { count: 0 }
},
methods: {
increment() {
this.count++
}
}
}
// 新版组合式
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
const increment = () => count.value++
return { count, increment }
}
}插槽重写策略
通过作用域插槽实现UI定制：
<!-- 基础组件 -->
<template>
<div class="base">
<slot name="header" :user="currentUser"/>
<slot :data="internalData"/>
</div>
</template>
<!-- 使用组件 -->
<BaseComponent>
<template #header="{ user }">
<h2>{{ user.name }}</h2>
</template>
<template #default="{ data }">
<custom-render :items="data"/>
</template>
</BaseComponent>组件代理模式
使用 v-bind="$attrs" 和 v-on="$listeners" 实现透明封装：
<template>
<el-input
v-bind="$attrs"
v-on="$listeners"
:class="customClass">
</el-input>
</template>注意事项
- 保持props向下兼容，新增属性建议通过
v-bind="$attrs"传递 - 事件处理使用
v-on="$listeners"确保事件冒泡 - 对于大规模重构，建议逐步迁移并建立版本兼容策略
- 关键生命周期钩子需测试覆盖率，避免破坏原有逻辑链
