在使用物件導向的程式語言
class繼承一直是很常使用的架構
在vue2 透過extends vue元件做到做元件繼承
最到類似class繼承後許多方便的功能
使用繼承的目的是
1.定義好通用的props,data,computed 繼承者都可直接使用
2.定義好通用的methods
如果繼承者有定義相同method會覆蓋掉底層的
3.生命周期
在底層的會被執行,繼承者有定義相同的也會被執行
透過維護底層元件讓繼承者都可得到對應的功能
vue3 如果使用option api寫還是一樣保有使用extens的功能
但若採用新的composition api則extends就變的無效
以下紀錄在composition api做到類似原來繼承的功能
使用範例
底層元件vAsset.ts
// 設定props資料,繼承者需取這來產生props
export const propsData = {
parentUid: {
type: String,
default: null
}
}
// 用來產生props
export const injectProps = () => (propsData)
export function vAsset () {
return {
....所有定義好要給外部使用的功能
}
}
繼承元件vObj.ts
import {vAsset, propsData as myPropsData} from './vAsset'
// 建立包含繼承的prop與自己新增的props資料
export const propsData = {
...myPropsData,
title: {
type: String,
default: 'title'
}
}
// 產生真正提供使用來inject props的function
export const injectProps = () => (propsData)
export function vObj () {
const oz = vAsset()
onMounted(() => {
// 使用到上層元件的功能可以用oz.xx取用有開放的部份
oz.on('Modal.CMD.Show', (id:string, boolean:boolean, myopenerId = '') => {
...
})
})
// 在這裡建立要使用的data或method...
let modalData = reactive({})
// export 出去同時包含要繼承進來的所有功能
return {
// data
modalData,
...oz
}
}
在vue元件上使用繼承功能myinstance.vue
<script setup lang='ts'>
import { vObj, injectProps } from 'src/core/vObj'
const {uid, attrs, isVisible} = vObj()
// 定義props, 除了自己本身的還要inject繼承進來的部份
const props = defineProps({
...injectProps(),
host: {
type: String,
default: ''
}
})
onMounted(()=>{
console.log(`onMounted id=${attrs.id} uid=${uid.value} parent=${props.parentUid}`)
})
</script>
