vue3提供了mixins和extends，但是嘗試之後發現這兩種方法只支援純OptionAPI，設定的data會被識別，但是設定的setup裡return 的reactive，完全無效，setup也沒有被執行。
所以這種方式只能用在第一種方式。
既然官方沒有提供，那麼我們自己來想想辦法。我們先觀察一下元件的程式碼（第二種情況）：
<template>
<!--模板-->
举例
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'ui-core-',
components: {
// 注册共用组件
},
props: {
// 定义共用属性
},
setup(props, context) {
// 各种共用操作
_logger()
_setTitle()
// 共用成员
const foo = reactive ({})
return {
foo
}
}
})
</script>defineComponent 方法接收一個對象，而物件需要有特定的幾個屬性，例如name、components、props、setup等。
那麼也就是說，我們可以做一個函數傳回這樣的物件即可。
例如我們先建立一個js（或則ts）檔案：
export function base (name, callback) {
return {
name: 'ui-' + name,
components: {
// 注册共用组件
},
props: {
// 定义共用属性
},
setup(props, context) {
// 各种共用操作
_logger()
_setTitle()
// 共用成员
const foo = reactive ({})
// 执行其他操作
const re = callback(props, context)
return {
foo,
...re
}
}
}
}有點像範本模式。
傳入name和一個回呼函數，props, context作為參數進行傳遞。內部成員也可以當作參數傳遞。
這樣一個簡單的基底類別就做成了，如果你覺得function不好看，那麼可以換成class。
export default class BaseComponent {
name: string
components: any
props: any
setup: any
constructor (name: string, callback: (props: any, context: any) => any) {
this.name = name
this.components = {}
this.props = {}
this.setup = (props: any, context: any) => {
// 各种共用操作
_logger()
_setTitle()
// 执行其他操作
const re = callback(props, context)
return {
...re
}
}
}
}有了class之後，還可以設定子類，但感覺有點繁瑣。總之，反正可以實現就對了。
上述這種方法應該也是可以支援純composition API的，但是有點小問題，defineProps 和defineEmits 並不是普通js 函數，而是一種「巨集」 。
引用官網的解釋：
defineProps 和 defineEmits 都是只能在
作者最新文章
