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 适用于复杂的组件继承和多态场景。
