Vue中如何扩展⼀个组件

此题属于实践题，考察⼤家对vue常⽤api使⽤熟练度，答题时不仅要列出这些解决⽅案，同时最好说出他们异同。

答题思路：
按照逻辑扩展和内容扩展来列举，
逻辑扩展有：mixins、extends、composition api；
内容扩展有slots；
分别说出他们使⽤⽅法、场景差异和问题。
作为扩展，还可以说说vue3中新引⼊的composition api带来的变化
回答范例：
1、常⻅的组件扩展⽅法有：mixins，slots，extends等。
2、混⼊mixins是分发 Vue 组件中可复⽤功能的⾮常灵活的⽅式。混⼊对象可以包含任意组件选项。当组件使⽤
混⼊对象时，所有混⼊对象的选项将被混⼊该组件本身的选项。

// 复⽤代码：它是⼀个配置对象，选项和组件⾥⾯⼀样
const mymixin = {
methods: {
dosomething(){}
}
}
// 全局混⼊：将混⼊对象传⼊
Vue.mixin(mymixin)
// 局部混⼊：做数组项设置到mixins选项，仅作⽤于当前组件
const Comp = {
mixins: [mymixin]
}

3、插槽主要⽤于vue组件中的内容分发，也可以⽤于组件扩展。
⼦组件Child：

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

⽗组件Parent：

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

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

4、组件选项中还有⼀个不太常⽤的选项extends，也可以起到扩展组件的⽬的:
// 扩展对象
const myextends = {
methods: {
dosomething(){}
}
}
// 组件扩展：做数组项设置到extends选项，仅作⽤于当前组件
// 跟混⼊的不同是它只能扩展单个对象
// 另外如果和混⼊发⽣冲突，该选项优先级较⾼，优先起作⽤
const Comp = {
extends: myextends
}

5、混⼊的数据和⽅法不能明确判断来源且可能和当前组件内变量产⽣命名冲突，vue3中引⼊的composition
api，可以很好解决这些问题，利⽤独⽴出来的响应式模块可以很⽅便的编写独⽴逻辑并提供响应式的数据，
然后在setup选项中组合使⽤，增强代码的可读性和维护性。例如：

// 复⽤逻辑1
function useXX() {}
// 复⽤逻辑2
function useYY() {}
// 逻辑组合
const Comp = {
setup() {
const {xx} = useXX()
const {yy} = useYY()
return {xx, yy}
}
}