Heim > Artikel > Web-Frontend > Was ist Mix-In in vue.js?
Was ist Mix-In in vue.js?
- coldplay.xixiOriginal
- 2020-11-11 10:30:182350Durchsuche
vue.js Mix-In definiert einen Teil wiederverwendbarer Methoden oder berechneter Eigenschaften. Das Mix-In-Objekt kann beliebige Komponentenoptionen enthalten. Wenn eine Komponente das Mix-In-Objekt verwendet, werden alle Optionen des Mix-In-Objekts verwendet in die Optionen der Komponente selbst eingemischt.
Die Betriebsumgebung dieses Tutorials: Windows10-System, vue2.4.2, dieser Artikel gilt für alle Computermarken.
【Empfohlene verwandte Artikel: vue.js】
混入 (Mixins) definieren einige wiederverwendbare Methoden oder berechnete Eigenschaften. Mixins können beliebige Komponentenoptionen enthalten. Wenn eine Komponente ein Mixin-Objekt verwendet, werden alle Optionen des Mixin-Objekts in die Optionen der Komponente selbst gemischt.
Sehen wir uns ein einfaches Beispiel an:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id = "databinding"></div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
},
methods : {
},
});
// 定义一个混入对象
var myMixin = {
created: function () {
this.startmixin()
},
methods: {
startmixin: function () {
document.write("欢迎来到混入实例");
}
}
};
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component();
</script>
</body>
</html>Optionszusammenführung:
Wenn Komponenten und Mixin-Objekte Optionen mit demselben Namen enthalten, werden diese Optionen auf die entsprechende Weise gemischt.
Zum Beispiel werden Datenobjekte intern rekursiv zusammengeführt, und wenn es einen Konflikt mit Komponentendaten gibt, haben die Komponentendaten Vorrang.
Hinweis:
(1) bedeutet, dass Sie im gemischten Objekt ein Datenattribut festlegen, das verschiedene Attributwerte enthält. Es gibt auch ein Datenattribut in der Komponente, dann die Datenwerte des gemischten Objekts Das Komponentenobjekt wird zusammengeführt, und die Komponentendaten werden zusammengeführt.
(2) Die Hook-Funktion mit demselben Namen wird aufgerufen, und der Hook des gemischten Objekts wird vor dem aufgerufen Eigener Hook der Komponente;
Global mixin
Das Format ist:
Vue.mixin({ // 混入函数 })Achtung! Verwenden Sie es mit Vorsicht. Sobald Sie ein globales Mixin-Objekt verwenden, wirkt es sich auf alle später erstellten Vue-Instanzen aus. Bei richtiger Verwendung können benutzerdefinierte Objekte mit Verarbeitungslogik ausgestattet werden.
Verwandte kostenlose Lernempfehlungen: JavaScript (Video)
Das obige ist der detaillierte Inhalt vonWas ist Mix-In in vue.js?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!