Vue3怎么實(shí)現(xiàn)組件級(jí)基類

這篇“Vue3怎么實(shí)現(xiàn)組件級(jí)基類”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue3怎么實(shí)現(xiàn)組件級(jí)基類”文章吧。

使用 mixins、extends

vue3提供了 mixins和extends，但是嘗試之后發(fā)現(xiàn)這兩種方法只支持純OptionAPI，設(shè)置的data會(huì)被識(shí)別，但是設(shè)置的setup里return 的 reactive，完全無效，setup也沒有被執(zhí)行。
所以這種方式只能使用于第一種方式。

使用 hooks （function、class）

既然官方?jīng)]有提供，那么我們自己來想想辦法。我們先觀察一下組件的代碼（第二種情況）：

<template>
  <!--模板-->
  舉例
</template>
<script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'ui-core-',
    components: {
      // 注冊(cè)共用組件
    },
    props: {
      // 定義共用屬性
    },
    setup(props, context) {
      // 各種共用操作
      _logger()
      _setTitle()
      // 共用成員
      const foo = reactive ({})
      return {
        foo
      }
    }
  })
</script>

defineComponent 方法接收一個(gè)對(duì)象，對(duì)象需要有特定的幾個(gè)屬性，比如name、components、props、setup等。
那么也就是說，我們可以做一個(gè)函數(shù)返回這樣的對(duì)象即可。
比如我們先建立一個(gè)js（或則ts）文件：

export function base (name, callback) {
  return {
    name: 'ui-' + name,
    components: {
      // 注冊(cè)共用組件
    },
    props: {
      // 定義共用屬性
    },
    setup(props, context) {
      // 各種共用操作
      _logger()
      _setTitle()
      // 共用成員
      const foo = reactive ({})
      // 執(zhí)行其他操作
      const re = callback(props, context)
      return {
        foo,
        ...re
      }
    }
  }
}

有點(diǎn)像模板模式。

傳入name和一個(gè)回調(diào)函數(shù)，props, context作為參數(shù)進(jìn)行傳遞。內(nèi)部成員也可以作為參數(shù)傳遞。
這樣一個(gè)簡(jiǎn)單的基類就做成了，如果你覺得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()
      // 執(zhí)行其他操作
      const re = callback(props, context)
      return {
        ...re
      }
    }
  }
}

有了class之后，還可以設(shè)置子類，不過感覺有點(diǎn)繁瑣。總之，反正可以實(shí)現(xiàn)就對(duì)了。

script setup怎么辦

上述這種方法應(yīng)該也是可以支持純composition API的，但是有點(diǎn)小問題，defineProps 和 defineEmits 并不是普通 js 函數(shù)，而是一種“宏”。
引用官網(wǎng)的解釋：

defineProps 和 defineEmits 都是只能在 <script setup> 中使用的編譯器宏。他們不需要導(dǎo)入，且會(huì)隨著 <script setup> 的處理過程一同被編譯掉。
也就是說 defineXXX系列 只有在 <script setup> 標(biāo)簽內(nèi)部才會(huì)被識(shí)別，如果在單獨(dú)的js文件里面，不會(huì)被識(shí)別。

這就導(dǎo)致 defineProps 和 defineEmits 無法做成基類的形式。
如果需要的基類不涉及 defineProps 和 defineEmits 的話，那么還是可以在單獨(dú)的js文件里面定義一個(gè)function或者class的，（即做一個(gè)綜合的hooks）。

如果涉及 defineProps 和 defineEmits，那么，我也沒想出來辦法。（只能第二種方式）

以上就是關(guān)于“Vue3怎么實(shí)現(xiàn)組件級(jí)基類”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。