目錄
使用mixins、extends
使用 hooks (function、class)
script setup怎麼辦
首頁 web前端 Vue.js Vue3怎麼實作元件級基類

Vue3怎麼實作元件級基類

May 23, 2023 pm 03:19 PM
vue3

使用mixins、extends

vue3提供了mixins和extends,但是嘗試之後發現這兩種方法只支援純OptionAPI,設定的data會被識別,但是設定的setup裡return 的reactive,完全無效,setup也沒有被執行。
所以這種方式只能用在第一種方式。

使用 hooks (function、class)

既然官方沒有提供,那麼我們自己來想想辦法。我們先觀察一下元件的程式碼(第二種情況):

<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之後,還可以設定子類,但感覺有點繁瑣。總之,反正可以實現就對了。

script setup怎麼辦

上述這種方法應該也是可以支援純composition API的,但是有點小問題,defineProps 和defineEmits 並不是普通js 函數,而是一種「巨集」 。
引用官網的解釋:

defineProps 和 defineEmits 都是只能在 <script setup> 中使用的編譯器巨集。他們不需要導入,會隨著 <script setup> 的處理過程一同被編譯掉。
也就是說 defineXXX系列 只有在 <script setup> 標籤內部才會被識別,如果在單獨的js檔案裡面,不會被識別。

這就導致 defineProps 和 defineEmits 無法做成基底類別的形式。
如果需要的基底類別不涉及 defineProps 和 defineEmits 的話,那麼還是可以在單獨的js檔案裡面定義一個function或者class的,(即做一個綜合的hooks)。

我還沒想到要解決 defineProps 和 defineEmits 的辦法。 (只能第二種方式)

以上是Vue3怎麼實作元件級基類的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

vue3專案中怎麼使用tinymce vue3專案中怎麼使用tinymce May 19, 2023 pm 08:40 PM

vue3專案中怎麼使用tinymce

vue3+vite:src使用require動態匯入圖片報錯怎麼解決 vue3+vite:src使用require動態匯入圖片報錯怎麼解決 May 21, 2023 pm 03:16 PM

vue3+vite:src使用require動態匯入圖片報錯怎麼解決

Vue3怎麼解析markdown並實現程式碼高亮顯示 Vue3怎麼解析markdown並實現程式碼高亮顯示 May 20, 2023 pm 04:16 PM

Vue3怎麼解析markdown並實現程式碼高亮顯示

Vue3如何實作刷新頁面局部內容 Vue3如何實作刷新頁面局部內容 May 26, 2023 pm 05:31 PM

Vue3如何實作刷新頁面局部內容

vue3項目打包發佈到伺服器後訪問頁面顯示空白怎麼解決 vue3項目打包發佈到伺服器後訪問頁面顯示空白怎麼解決 May 17, 2023 am 08:19 AM

vue3項目打包發佈到伺服器後訪問頁面顯示空白怎麼解決

Vue3復用元件怎麼使用 Vue3復用元件怎麼使用 May 20, 2023 pm 07:25 PM

Vue3復用元件怎麼使用

Vue3中如何使用defineCustomElement定義元件 Vue3中如何使用defineCustomElement定義元件 May 28, 2023 am 11:29 AM

Vue3中如何使用defineCustomElement定義元件

怎麼用Vue3和Element Plus實現自動導入 怎麼用Vue3和Element Plus實現自動導入 May 22, 2023 pm 04:58 PM

怎麼用Vue3和Element Plus實現自動導入

See all articles