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.
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 'vue'
export default defineComponent({
name: 'ui-core-',
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.
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
Derniers articles par auteur
La différence entre vue2.0 et 3.0
Quels sont les cycles de vie de vue3
Comment ouvrir le fichier dmp
Solution au problème xlive.dll manquant
Windows ne peut pas ouvrir ajouter une imprimante
Qu'est-ce que Weidian
Graphique des prix historiques du Bitcoin
Comment acheter et vendre du Bitcoin légalement
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
