Vue3 でコンポーネントレベルの基本クラスを実装する方法

mixins と extends を使用する

vue3 には mixins と extends が用意されていますが、試してみたところ、これら 2 つのメソッドは純粋な OptionAPI のみをサポートしていることがわかりました。セットのデータは認識されますが、セット内の戻り値はリアクティブですセットアップが完全に無効であるため、セットアップは実行されません。
したがって、このメソッドは最初のメソッドでのみ使用できます。

フック(関数、クラス)を使用する

公式が提供していないので、自分で方法を探しましょう。まずコンポーネント コードを観察してみましょう (2 番目のケース):

<template>
  <!--模板-->
  举例
</template>
<script lang="ts">
  import { defineComponent } from &#39;vue&#39;
  export default defineComponent({
    name: &#39;ui-core-&#39;,
    components: {
      // 注册共用组件
    },
    props: {
      // 定义共用属性
    },
    setup(props, context) {
      // 各种共用操作
      _logger()
      _setTitle()
      // 共用成员
      const foo = reactive ({})
      return {
        foo
      }
    }
  })
</script>

defineComponent メソッドはオブジェクトを受け取ります。このオブジェクトには、名前、コンポーネント、プロパティ、セットアップなどのいくつかの特定の属性が必要です。
言い換えれば、そのようなオブジェクトを返す関数を作成できます。
たとえば、最初に 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
      }
    }
  }
}

これはテンプレート モードに似ています。

名前とコールバック関数、プロパティ、コンテキストをパラメータとして渡します。内部メンバーをパラメータとして渡すこともできます。
このような単純な基底クラスが作成されましたが、関数では見栄えが悪いと思われる場合は、クラスに変更してください。

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を取得した後、サブクラスを設定することもできますが、少し面倒に感じます。要するに、とにかく達成できるということです。

スクリプトのセットアップで何をするか

上記のメソッドは純粋な合成 API もサポートしているはずですが、少し問題があります。defineProps とdefineEmits は通常の JS 関数ではなく、一種の「マクロ」です。 「。」
公式サイトの説明を引用:

definePropsとdefineEmitsは5101c0cdbdc49998c642c71f6b6410a8でのみ使用できるコンパイラマクロです。これらはインポートする必要はなく、8e22d5627eed85f4f7555e8fe9295d57 プロセスとともにコンパイルされます。
つまり、defineXXXシリーズは5101c0cdbdc49998c642c71f6b6410a8タグ内でのみ認識され、別のjsファイル内にある場合は認識されません。

これにより、defineProps とdefineEmits を基本クラスにすることができなくなります。
必要な基本クラスにdefinePropsとdefineEmitsが含まれていない場合でも、別のjsファイルで関数またはクラスを定義できます(つまり、包括的なフックを作成します)。

defineProps と defineEmits の解決策は考えていません。 (2番目の方法のみ)

以上がVue3 でコンポーネントレベルの基本クラスを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。