Vue gemischte Schreibmethode

Vue Mixin ist eine Möglichkeit, von Vue bereitgestellten Code wiederzuverwenden. Es ermöglicht Ihnen, eine Reihe von Optionen zu definieren und diese Optionen dann über mehrere Komponenten hinweg zu teilen. Eine der häufigsten Anwendungen von Vue-Mixins ist das Hinzufügen berechneter Eigenschaften, Methoden und reaktiver Daten, die Komponenten benötigen. In diesem Artikel stellen wir die grundlegenden Konzepte und die allgemeine Verwendung von Vue-Mixins vor und stellen praktische Beispiele und Code bereit.

1. Grundkonzepte

Vue-Mix-In ist eigentlich ein JavaScript-Objekt, das beliebige Vue-Komponentenoptionen enthalten kann. Normalerweise definieren Mixins einige häufig verwendete berechnete Eigenschaften, Methoden und Daten, und mehrere Komponenten können diese Optionen gemeinsam nutzen.

Wenn Sie ein Mixin-Objekt auf eine Komponente anwenden, werden die Optionen im Mixin-Objekt mit den Optionen in der Komponente zusammengeführt. Wenn sowohl das Mixin als auch die Komponente dieselben Optionen definieren, überschreiben die Optionen der Komponente die Optionen des Mixins.

2. Grundlegende Verwendung

Das Folgende ist ein einfaches Mix-In-Beispiel, das eine berechnete Eigenschaft und eine Methode definiert:

const myMixin = {
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  },
  methods: {
    sayHello() {
      alert("Hello, " + this.fullName + "!")
    }
  }
}

In diesem Mix-In-Objekt definieren wir eine berechnete Eigenschaft fullName, die firstName und lastName verkettet. Außerdem ist eine Methode sayHello definiert, die bei Aufruf ein Begrüßungsfeld mit fullName öffnet.

Jetzt können wir dieses Mixin-Objekt auf eine Vue-Komponente anwenden. Sehen Sie sich bitte das folgende Beispiel an:

Vue.component('my-component', {
  mixins: [myMixin],
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  }
  // other component options...
})

In dieser Komponentendefinition mischen wir myMixin in die Komponente und definieren dann einige Komponentenoptionen, einschließlich der beiden Datenoptionen „firstName“ und „lastName“. Da wir die berechnete Eigenschaft „fullName“ und die Methode „sayHello“ in myMixin gemischt haben, sind diese beiden Optionen auch in der Komponente verfügbar.

Jetzt können wir diese Optionen in dieser Komponente verwenden:

<template>
  <div>
    <h1>{{ fullName }}</h1>
    <button @click="sayHello">Say Hello</button>
  </div>
</template>

Diese Komponente berechnet den vollständigen Namen basierend auf Vorname und Nachname und zeigt ihn auf der Seite an. Wenn wir auf die Schaltfläche „Say Hello“ klicken, wird die Methode sayHello aufgerufen und ein Begrüßungsfeld mit „fullName“ angezeigt.

3. Lokales Mischen

Mischen kann nicht nur auf globale Komponenten angewendet werden, sondern kann auch lokal innerhalb von Komponenten gemischt werden. Hier ist ein Beispiel für ein globales Mixin und ein lokales Mixin:

const myGlobalMixin = { // 全局混入
  // ...
}

const myLocalMixin = { // 局部混入
  // ...
}

Vue.component('my-component', {
  mixins: [myGlobalMixin, myLocalMixin],
  // ...
})

In diesem Beispiel definieren wir zunächst ein globales Mixin myGlobalMixin und mischen es dann in der Komponentendefinition. Gleichzeitig definieren wir auch ein lokales Mixin myLocalMixin und mischen es zusammen mit dem globalen Mixin in die Komponente ein. Lokale Mixins haben eine höhere Priorität als globale Mixins. Wenn also eine Option sowohl in einem lokalen Mixin als auch in einem globalen Mixin erscheint, wird die Option im lokalen Mixin verwendet.

4. Mischausführungsreihenfolge

Wenn in der Mischung und in der Komponente dieselbe Option vorhanden ist, überschreibt der gemischte Wert den ursprünglichen Wert in der Komponente. Die Reihenfolge, in der verschiedene Mixins und Komponenten definiert werden, wirkt sich jedoch auf die endgültigen Zusammenführungsoptionen aus. Normalerweise werden Optionen in einem Mixin zuerst und dann mit den Komponentenoptionen zusammengeführt, aber wenn das Mixin und die Komponente dieselben Optionen definieren, werden die Komponentenoptionen zuerst verwendet. Ein Beispiel ist wie folgt:

const myMixin = {
  data() {
    return {
      message: 'Mixin Message'
    }
  }
}

Vue.component('my-component', {
  mixins: [myMixin],
  data() {
    return {
      message: 'Component Message'
    }
  },
  created() {
    console.log(this.message);
  }
})

In diesem Beispiel definieren wir ein myMixin-Mixin, in dem wir eine Datenoption definieren, die ein Nachrichtenattribut enthält. Dann mischen wir myMixin in die Komponente my-component und definieren eine identische Datenoption in der Komponente. Wenn diese Komponente erstellt wird, wird „Komponentenmeldung“ gedruckt. Weil das in der Komponente definierte Nachrichtenattribut eine höhere Priorität hat als das Attribut im Mixin.

Wenn Sie möchten, dass die Mixin-Optionen im Mixin-Objekt und in den Komponentenoptionen erhalten bleiben, verwenden Sie die Funktion Vue.extend(), um das Mixin-Objekt zu erstellen. Dies stellt einen neuen erweiterten Vue-Konstruktor dar, dessen Optionen über alle Komponenteninstanzen hinweg beibehalten werden. Das Beispiel sieht wie folgt aus:

const myMixin = Vue.extend({
  data() {
    return {
      message: 'Mixin Message'
    }
  }
})

Vue.component('my-component', {
  mixins: [myMixin],
  data() {
    return {
      message: 'Component Message'
    }
  },
  created() {
    console.log(this.message);
  }
})

In diesem Beispiel verwenden wir die Funktion Vue.extend(), um das Mixin-Objekt myMixin zu erstellen, das eine Datenoption enthält, in der das Nachrichtenattribut definiert ist. Dann mischen wir myMixin in die Komponente my-component und definieren die gleiche Datenoption in dieser Komponente. Wenn diese Komponente erstellt wird, wird eine „Mixin-Nachricht“ gedruckt. Weil im erweiterten Vue-Konstruktor definierte Eigenschaften eine höhere Priorität haben als in der Komponente definierte Eigenschaften.

5. Zusammenfassung

Vue Hybrid ist eine praktische Möglichkeit, Code wiederzuverwenden und bietet Optionen zur gemeinsamen Nutzung mehrerer Komponenten, um die Wiederverwendbarkeit von Code zu verbessern. Mixins können global und lokal verwendet werden. Die Verwendung von Mixins in Vue ist eine der besten Optionen, um Funktionen schnell zu implementieren und die Wiederverwendbarkeit von Code zu verbessern. Sie müssen jedoch auf die Priorität und Zusammenführungsreihenfolge der Mixin-Optionen achten, um sicherzustellen, dass Ihr Code wie erwartet funktioniert. In der tatsächlichen Entwicklung können wir zunächst nach Bedarf ein Mix-In-Objekt definieren und es dann in die Komponenten mischen, die das Mix-In-Objekt gemeinsam nutzen müssen, wodurch eine Code-Wiederverwendung erreicht wird.

Das obige ist der detaillierte Inhalt vonVue gemischte Schreibmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!