vue重写组件实现
重写 Vue 组件的方法
使用 extends 继承原组件
通过 extends 继承现有组件，保留原有功能并覆盖特定选项。例如重写模板或方法：
import BaseComponent from './BaseComponent.vue';
export default {
extends: BaseComponent,
template: '<div>Custom template</div>',
methods: {
customMethod() {
// 覆盖原方法
}
}
}组合式 API 重构逻辑
在 Vue 3 中，利用 setup() 和组合式函数拆分逻辑。例如将数据获取和状态管理拆分为独立函数：
import { ref } from 'vue';
import useFetch from './composables/useFetch';
export default {
setup() {
const { data, error } = useFetch('/api/data');
return { data, error };
}
}渲染函数动态生成内容
使用 render() 函数替代模板，实现更灵活的渲染逻辑。适用于需要动态生成复杂结构的场景：
export default {
render(h) {
return h('div', this.items.map(item =>
h('span', { class: 'item' }, item.text)
));
}
}高阶组件（HOC）模式
通过函数返回新组件的方式增强原有组件。例如添加权限控制：
function withAuth(WrappedComponent) {
return {
render(h) {
return this.$store.state.isAuthenticated
? h(WrappedComponent)
: h('div', 'Unauthorized');
}
};
}关键注意事项
- 避免直接修改原组件：优先通过继承或组合扩展，而非直接修改源代码。
- 生命周期处理：重写时需确保原有生命周期钩子（如
mounted）未被意外覆盖。 - Prop 传递：使用
v-bind="$attrs"确保未声明的 props 能正确传递给子组件。 - 插槽透传：通过
<slot>或render函数中的$slots保留原有插槽功能。
