Comment implémenter des classes de base au niveau des composants dans Vue3

Utiliser des mixins et des extensions

vue3 fournit des mixins et des extensions, mais après l'avoir essayé, j'ai découvert que ces deux méthodes ne prennent en charge que l'OptionAPI pure. Les données définies seront reconnues, mais le réactif de retour dans la configuration de l'ensemble est complètement invalide et. l'installation n'est pas reconnue.
Cette méthode ne peut donc être utilisée que dans la première méthode.

Utilisez des hooks (fonction, classe)

Puisque le fonctionnaire ne le fournit pas, trouvons-le nous-mêmes. Observons d'abord le code du composant (deuxième cas) : la méthode

<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 reçoit un objet, qui doit avoir plusieurs attributs spécifiques, tels que le nom, les composants, les accessoires, la configuration, etc.
En d'autres termes, nous pouvons créer une fonction pour renvoyer un tel objet.
Par exemple, créons d'abord un fichier js (ou 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
      }
    }
  }
}

C'est un peu comme le mode modèle.

Passez le nom et une fonction de rappel, des accessoires et un contexte comme paramètres. Les membres internes peuvent également être transmis en tant que paramètres.
Une classe de base aussi simple est créée. Si vous pensez que la fonction n'est pas esthétique, vous pouvez la changer en classe.

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

Après avoir suivi un cours, vous pouvez également définir des sous-classes, mais cela semble un peu fastidieux. Bref, cela peut être réalisé de toute façon.

Que faire avec la configuration du script

La méthode ci-dessus devrait également être capable de prendre en charge l'API de composition pure, mais il y a un léger problème. DefinProps et DefineEmits ne sont pas des fonctions js ordinaires, mais une sorte de "macro".
Citant l'explication du site officiel :

defineProps et DefineEmits sont des macros de compilateur qui ne peuvent être utilisées que dans 5101c0cdbdc49998c642c71f6b6410a8. Ils n'ont pas besoin d'être importés et seront compilés avec le processus de 2d1858297e72f716b2504a0c5161edaf.
C'est-à-dire que la série definitionXXX ne sera reconnue que dans la balise 5101c0cdbdc49998c642c71f6b6410a8

Cela a pour conséquence que DefineProps et DefineEmits ne peuvent pas être transformés en classes de base.
Si la classe de base requise n'implique pas DefineProps et DefineEmits, vous pouvez toujours définir une fonction ou une classe dans un fichier js séparé (c'est-à-dire créer un hook complet).

Je n'ai pas encore pensé à une solution pour définirProps et définirEmits. (Seulement la deuxième façon)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!