1.方式

常见组件扩展：mixins， extends ，内容扩展slots，vue3的composition API

2.说明

2.1 mixins

• 混入mixins是分发Vue组件中可复用的功能 非常灵活的方式。
• 混入的对象可以包含任意组件选项。
• 分为全局混入和局部混入

单个混入

1. 数据对象data在内部会进行递归合并，并在发生冲突时以组件数据优先。
2. 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
3. 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

多个个混入

1. 执行顺序与引入（import）顺序无关，而与注册顺序（mixins: [myMixin1，myMixin2] ）有关，先注册的先执行。
2. 数据对象（data）在内部会进行递归合并，在发生冲突时，后注册的混入中的数据会覆盖前面的数据。
3. 同名钩子函数将合并为一个数组，因此都将被调用。执行顺序与注册顺序一致。
4. 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。发生冲突时，取后注册的键值对。

const mymixin = {
    methods: {
        hello(){}
    }
}
//全局混入
Vue.mixin(mymixin) //注意是单个对象
//局部混入 
Const Comp = {
    mixins = [mymixin] // 注意用的是组数
}

2.2 插槽主要用于Vue组件中的内容分发，也可以用于组件的扩展

2.2.1匿名插槽

子组件Child

<div>
    <slot>这是子组件</slot>
</div>

父组件Parent

<div>
    <Child>这是在父组件定义的内容</Child>
</div>

2.2.2具名插槽

通过具体的名称，可以精确分发到不同的位置。

子组件slot="xxxx" ，父组件 slot name="xxxx"

// 子组件
<template>
    <section>
        <slot name="article-title">这里放标题</slot>
        <slot>这里放作者</slot>
        <slot name="article-content">这里放文章内容</slot>
    </section>
</template>

// 父组件
<template>
    <section>
        <slot-child>
            <h1 slot="article-title">标题111</h1>
            <p slot="article-content">内容222</p>
        </slot-child>
    </section>
</template> 

2.2.3作用域插槽

在父组件要使用子组件的内容渲染，可以使用

//子组件 ，在子组件提前注入数据 :xxx="内容"
<slot :nickName="'Tusi'"></slot>
//父组件 ， 父组件可以通过 scope.xxx获取
<template>
    <section>
        <slot-child>
            <template slot-scope="scope">
                <div>{{scope.nickName}}</div>
            </template>
        </slot-child>
    </section>
</template>

2.3 extends

1. extends的内容必须是对象或者方法
2. 只能扩展继承单个对象，不过可以通过多继承实现。。
3. extends合并冲突逻辑与mixins一致，不过 extends 比 mixins先执行
4. 冲突后执行顺序 extends > mixin1 > mixin2 > component （[mixin1,mixin2]）

const myextends = {
    methods: {
        hello() {}
    }
}
const Comp = {
    extends: myextends
}

2.4 vue3 compostion API

• 可以解决混入后，数据和方法不能明确判断来源，与当前组件内变量命名产生冲突。
• 利用独立出来的响应式模块，可以很方便的便携独立的逻辑并且提供高响应式数据。最后通过setup选项中有机组合使用。

// 复用逻辑1
function useXXX() {}
// 复用逻辑2
function useYYY() {}
// 逻辑组合
const Comp = {
    setup() {
        const {xx} = useXXX()
        const {yy} = useYYY()
        return {xx,yy}
    }
}