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组件库，二次开发自定义的功能，大家可以去尝试一下。