So implementieren Sie Basisklassen auf Komponentenebene in Vue3

Verwenden Sie Mixins und Extends

vue3 bietet Mixins und Extends, aber nachdem ich es ausprobiert habe, habe ich festgestellt, dass diese beiden Methoden nur die reine OptionAPI unterstützen Das Setup ist reaktiv, völlig ungültig und das Setup wird nicht ausgeführt.
Diese Methode kann also nur in der ersten Methode verwendet werden.

Verwenden Sie Hooks (Funktion, Klasse)

Da der Beamte dies nicht bereitstellt, werden wir selbst einen Weg finden. Betrachten wir zunächst den Komponentencode (zweiter Fall):

<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-Methode empfängt ein Objekt, und das Objekt muss mehrere spezifische Attribute haben, wie z. B. Name, Komponenten, Requisiten, Setup usw.
Mit anderen Worten, wir können eine Funktion erstellen, um ein solches Objekt zurückzugeben.
Erstellen wir zum Beispiel zuerst eine js- (oder ts-)Datei:

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
      }
    }
  }
}

Es ist ein bisschen wie im Vorlagenmodus.

Übergeben Sie den Namen und eine Rückruffunktion, Requisiten und Kontext als Parameter. Interne Mitglieder können auch als Parameter übergeben werden.
Eine solche einfache Basisklasse ist erstellt. Wenn Sie der Meinung sind, dass die Funktion nicht gut aussieht, können Sie sie in eine Klasse ändern.

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
      }
    }
  }
}

Nachdem Sie eine Klasse haben, können Sie auch Unterklassen festlegen, aber das fühlt sich etwas umständlich an. Kurz gesagt, es kann trotzdem erreicht werden.

Was ist mit der Skripteinrichtung zu tun?

Die obige Methode sollte auch die reine Kompositions-API unterstützen können, es gibt jedoch ein kleines Problem , sondern eine Art „Makro“.
Zitiert die Erklärung von der offiziellen Website:

defineProps und defineEmits sind Compiler-Makros, die nur im 5101c0cdbdc49998c642c71f6b6410a8 verwendet werden können. Sie müssen nicht importiert werden und werden zusammen mit dem 5101c0cdbdc49998c642c71f6b6410a8-Prozess kompiliert.
Das heißt, die defineXXX-Serie wird nur innerhalb des 5101c0cdbdc49998c642c71f6b6410a8 erkannt. Wenn sie sich in einer separaten js-Datei befindet, wird sie nicht erkannt.

Dies führt dazu, dass defineProps und defineEmits nicht in Basisklassen umgewandelt werden können.
Wenn die erforderliche Basisklasse nicht defineProps und defineEmits umfasst, können Sie dennoch eine Funktion oder Klasse in einer separaten js-Datei definieren (dh einen umfassenden Hook erstellen).

Ich habe mir noch keine Lösung zum Definieren von Props und Definieren von Emits ausgedacht. (Nur der zweite Weg)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Basisklassen auf Komponentenebene in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!