vue3繼承實作

在使用物件導向的程式語言 

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>