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.
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 'vue'
export default defineComponent({
name: 'ui-core-',
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.
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
Neueste Artikel des Autors
Der Unterschied zwischen vue2.0 und 3.0
Was sind die Lebenszyklen von vue3?
Die Rolle der Funktion float() in Python
So verwenden Sie Excel-Makros
Welche Arten von Systemarchitekturen gibt es?
besonderer Symbolpunkt
So stellen Sie den gelöschten WeChat-Chat-Verlauf wieder her
Verwendung von rewritecond
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
