Vue中如何扩展⼀个组件

按照逻辑扩展和内容扩展来列举，

• 逻辑扩展有：mixins、extends、composition api（vue3）；

• 内容扩展有slots；

mixins

概念：混⼊mixins是分发 Vue 组件中可复⽤功能的⾮常灵活的⽅式。混⼊对象可以包含任意组件选项。当组件使⽤ 混⼊对象时，所有混⼊对象的选项将被混⼊该组件本身的选项。
缺点：混⼊的数据和⽅法不能明确判断来源且可能和当前组件内变量产⽣命名冲突

应用：

// 复⽤代码：它是⼀个配置对象，选项和组件⾥⾯⼀样
const mymixin = {
    methods: {
        dosomething(){}
    }
}

// 全局混⼊：将混⼊对象传⼊
Vue.mixin(mymixin)

// 局部混⼊：做数组项设置到mixins选项，仅作⽤于当前组件
const Comp = {
    mixins: [mymixin]
}

slot

⼦组件Child

    <div>
        <slot>这个内容会被⽗组件传递的内容替换</slot>
    </div>

⽗组件Parent

    <div>
        <Child>来⾃⽼爹的内容</Child>
    </div>

如果要精确分发到不同位置可以使⽤具名插槽，如果要使⽤⼦组件中的数据可以使⽤作⽤域插槽。

extends -不怎么用

// 扩展对象

const myextends = {
    methods: {
        dosomething(){}
    }
}

// 组件扩展：做数组项设置到extends选项，仅作⽤于当前组件
// 跟混⼊的不同是它只能扩展单个对象
// 另外如果和混⼊发⽣冲突，该选项优先级较⾼，优先起作⽤
const Comp = {
    extends: myextends
}

mixins 和 extends 区别

extends继承，如果一个类extends另一个类，则成为其子类。 如果A extends B，则 A is a B。

mixins组合，A只想使用B，C的能力，而不需要成为B，C的子类时，则可以使用mixin。
如果A mixins B，C，则A is B-able and C-able。

mixins要比extends灵活

在vue中extend和mixin在实现上区别不大。从API上实现了单继承，多组合的能力。