vue实现继承多态

Vue 中实现继承和多态的方法

在 Vue 中实现继承和多态可以通过以下几种方式实现，主要依赖于 JavaScript 的原型继承和组合式 API 的特性。

使用 Mixins 实现继承

Mixins 是 Vue 2.x 中实现代码复用的主要方式，可以将多个组件的选项合并到一个组件中。

// 定义一个 mixin
const myMixin = {
  created() {
    this.hello();
  },
  methods: {
    hello() {
      console.log('hello from mixin!');
    }
  }
};

// 使用 mixin
Vue.component('my-component', {
  mixins: [myMixin],
  created() {
    console.log('component created');
  }
});

使用 extends 实现继承

Vue 提供了 extends 选项，允许一个组件继承另一个组件的选项。

// 基础组件
const BaseComponent = {
  methods: {
    hello() {
      console.log('hello from base component');
    }
  }
};

// 继承基础组件
const ChildComponent = {
  extends: BaseComponent,
  created() {
    this.hello();
  }
};

使用 Composition API 实现多态

Vue 3 的 Composition API 提供了更灵活的方式来组合逻辑，可以通过函数组合实现多态。

// 基础功能
function useBase() {
  const sayHello = () => {
    console.log('hello from base');
  };
  return { sayHello };
}

// 扩展功能
function useExtended() {
  const { sayHello } = useBase();
  const sayGoodbye = () => {
    console.log('goodbye from extended');
  };
  return { sayHello, sayGoodbye };
}

// 在组件中使用
export default {
  setup() {
    const { sayHello, sayGoodbye } = useExtended();
    return { sayHello, sayGoodbye };
  }
};

使用插槽实现多态

通过插槽（Slots）可以在父组件中动态决定子组件的渲染内容，实现多态。

// 子组件
Vue.component('child-component', {
  template: `
    <div>
      <slot name="header"></slot>
      <slot></slot>
      <slot name="footer"></slot>
    </div>
  `
});

// 父组件
Vue.component('parent-component', {
  template: `
    <child-component>
      <template v-slot:header>
        <h1>Header Content</h1>
      </template>
      <p>Default Content</p>
      <template v-slot:footer>
        <p>Footer Content</p>
      </template>
    </child-component>
  `
});

使用 provide/inject 实现跨组件继承

Vue 的 provide 和 inject 可以实现祖先组件向子孙组件传递数据和方法，实现跨层级的继承。

// 祖先组件
const AncestorComponent = {
  provide() {
    return {
      sharedMethod: this.sharedMethod
    };
  },
  methods: {
    sharedMethod() {
      console.log('shared method from ancestor');
    }
  }
};

// 子孙组件
const DescendantComponent = {
  inject: ['sharedMethod'],
  created() {
    this.sharedMethod();
  }
};

使用高阶组件（HOC）实现多态

高阶组件是一种函数，接收一个组件并返回一个新的组件，可以在返回的组件中添加额外的功能。

function withLogging(WrappedComponent) {
  return {
    mounted() {
      console.log('Component is mounted');
    },
    render(h) {
      return h(WrappedComponent);
    }
  };
}

const MyComponent = {
  template: '<div>My Component</div>'
};

const EnhancedComponent = withLogging(MyComponent);

以上方法可以根据具体需求选择使用，Mixins 和 extends 适用于 Vue 2.x，Composition API 和插槽适用于 Vue 3，高阶组件和 provide/inject 适用于复杂的组件继承和多态场景。