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 保留原有插槽功能。