Vue中如何扩展⼀个组件

Vue中如何扩展⼀个组件

按照逻辑扩展和内容扩展来列举:
逻辑扩展有：mixins、extends、composition api；
内容扩展有: slots；

一、Mixin

组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取,
vue3中支持使用composition api

1.如果是data函数的返回值对象

• 返回值对象默认情况下会进行合并
  如果data返回值对象的属性发生了冲突，那么会保留组件自身的数据

2.如何生命周期钩子函数

• 生命周期的钩子函数会被合并到数组中，都会被调用
  先执行Mixin中对应的逻辑，在执行组件中对应生命周期钩子的逻辑

3.值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象

• 比如都有methods选项，并且都定义了方法，那么它们都会生效
  但是如果对象的key相同，那么会取组件对象的键值对

4.全局混入

const app = createApp(App)
ap