Heim >Web-Frontend >js-Tutorial >So verwenden Sie Vue-Mixins und -Erweiterungen
Dieses Mal werde ich Ihnen zeigen, wie Sie Vue-Mixins und Extends verwenden. Was sind die Hinweise bei der Verwendung von Vue-Mixins und -Extends? Das Folgende ist ein praktischer Fall. Lasst uns gemeinsam einen Blick darauf werfen. Schaut mal rein.
Vue stellt Mixins bereit und erweitert Konfigurationselemente, was ich in letzter Zeit sehr nützlich fand.
Mixins und VererbungErweiterungen
Schauen Sie sich an, was in der offiziellen Dokumentation steht. Tatsächlich kann man beides als Vererbung verstehen, die Objekte empfängt und Arrays (kann als Mehrfachvererbung verstanden werden) und erweitert, als ob sie Objekte oder Funktionen empfängt (kann verstanden werden). als Einzelvererbung).
Hook-Funktion erben
const extend = { created () { console.log('extends created') } } const mixin1 = { created () { console.log('mixin1 created') } } const mixin2 = { created () { console.log('mixin2 created') } } export default { extends: extend, mixins: [mixin1, mixin2], name: 'app', created () { console.log('created') } }
Konsolenausgabe
extends created mixin1 created mixin2 created created
Fazit: Die von Mixins und Extens geerbte übergeordnete Klasse wird zuerst aufgerufen. Die durch Extens ausgelöste Priorität ist höher als bei der Warteschlange
Methoden erben
const extend = { data () { return { name: 'extend name' } } } const mixin1 = { data () { return { name: 'mixin1 name' } } } const mixin2 = { data () { return { name: 'mixin2 name' } } } // name = 'name' export default { mixins: [mixin1, mixin2], extends: extend, name: 'app', data () { return { name: 'name' } } } // 只写出子类,name = 'mixin2 name',extends优先级高会被mixins覆盖 export default { mixins: [mixin1, mixin2], extends: extend, name: 'app' } // 只写出子类,name = 'mixin1 name',mixins后面继承会覆盖前面的 export default { mixins: [mixin2, mixin1], extends: extend, name: 'app' }
Fazit: Wenn die Unterklasse erneut deklariert wird, werden die Variablen in den Daten neu geschrieben, unabhängig davon, um welche Unterklasse es sich handelt.
Im Folgenden werden Mixins, Extends und Extend
separat vorgestellt. Mixins
Aufrufmethode: Mixins: [mixin1, mixin2]
Es handelt sich um eine Erweiterung der übergeordneten Komponente, einschließlich Methoden, Komponenten, Anweisungen usw. . .
Wenn die Hook-Funktion ausgelöst wird, wird zuerst die Funktion der Mixins und dann die Funktion der übergeordneten Komponente aufgerufen.
Obwohl Sie beim Erstellen eines Mixins auch Daten und Vorlagenattribute hinzufügen können, hat die übergeordnete Komponente auch Vorrang, wenn sie über dieses Attribut verfügt. Ab diesem Punkt können Sie auch die Absicht des Herstellers erkennen (Erweiterung).
Objekte im Schlüsselwertformat wie Funktionen innerhalb von Daten, Methoden, Komponenten und Anweisungen basieren auf der übergeordneten Komponente/Instanz
verlängert sich
Aufrufmethode: erweitert: CompA
Es handelt sich ebenfalls um eine Erweiterung der übergeordneten Komponente, ähnlich wie bei Mixins, ihre Priorität ist jedoch niedriger als die der übergeordneten Komponente
verlängern
Konstruktor der Erweiterungskomponente
wird automatisch aufgerufen, wenn wir vue.component('a', {...}) aufrufen. Es ist erwähnenswert, dass die Daten in „extend“ eine Funktion sind.
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !
Empfohlene Lektüre:
Ajax-Anfragemethode im Axios-Client
vue.js vue-router verbessert die Benutzererfahrung
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue-Mixins und -Erweiterungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!