Vue 中的组件混入和继承功能允许我们在多个组件之间共享代码，从而提高代码的可重用性和可维护性。
1. 组件的混入
混入是一种将多个对象合并为一个对象的技术。在 Vue 3 中，我们可以使用 mixins 属性来定义混入对象，然后将其与组件合并。
下面是一个简单的示例代码：
<template>
<div>hello</div>
</template>
<script lang="ts">
import {
defineComponent } from "vue";
const myMixin1 = {
methods: {
foo1() {
console.log("myMixin：", "foo1 from mixin1");
},
},
};
const myMixin2 = {
methods: {
foo2() {
console.log("myMixin：", "foo2 from mixin2");
},
},
};
export default defineComponent({
mixins: [myMixin1, myMixin2],
mounted() {
this.foo1();
this.foo2();
this.bar();
},
methods: {
bar() {
console.log("组件：", "bar from component");
},
},
});
</script>
<style scoped></style>
在上面的代码中，我们定义了一个名为 MyMixin 的混入对象，并在其中定义了一个 created 钩子函数。然后，我们将 MyMixin 混入到组件中，并在组件中定义了一个 created 钩子函数。在运行时，MyMixin 中的 created 钩子函数会在组件的 created 钩子函数之前被调用。
2. 组件的继承
继承是一种允许我们从一个已有的组件派生出一个新的组件的技术。在 Vue3 中，我们可以使用 extends 属性来定义组件的继承关系。使用场景：比如基于组件库拓展自定义功能。
下面是一个简单的示例代码：
<template>
<div>
<h1>ectends</h1>
<p>{
{ message1 }}</p>
<p>{
{ message2 }}</p>
</div>
</template>
<script lang="ts">
import {
defineComponent } from "vue";
const MyBaseComponent = {
template: `
<div>
<h1>Base Component</h1>
<p>{
{ message }}</p>
</div>
`,
data() {
return {
message1: "This is a base component!",
};
},
};
export default defineComponent({
extends: MyBaseComponent,
data() {
return {
message2: "This is a derived component!",
};
},
});
</script>
<style scoped></style>
在上面的代码中，我们定义了一个名为 MyBaseComponent 的基础组件，并在其中定义了一个 message1 数据属性。然后，我们通过 extends 属性将其派生为一个新的组件，并在派生组件中重新定义了 message2 属性。在运行时，派生组件会继承基础组件的所有属性和方法，并覆盖其中的重复属性和方法。此处定义的MyBaseComponent组件可封装成文件导入到需要继承的组件，此方式可以基于UI组件库，二次开发自定义的功能，大家可以去尝试一下。
总结
Vue 中的组件混入和继承功能允许我们在多个组件之间共享代码，从而提高代码的可重用性和可维护性。使用混入可以让我们将多个对象合并为一个对象，使用继承可以让我们从一个已有的组件派生出一个新的组件。