Detaillierte Erklärung der Vue-Mixin-Verwendung und des Zusammenführens von Optionen

<Vorlage>
  <div Klasse="Ereignisstil">
    <h2>Grundlagen</h2>
    <div Klasse="innere_Kinder">
      <span>{{ Nachricht }}</span>
    </div>
  </div>
</Vorlage>
<Skript>
var meinMixin = {
  Daten() {
    zurückkehren {
      Nachricht: "",
    };
  },
  erstellt: Funktion () {
    console.log("erstellt: Mixin hinzufügen");
    this.message = "erstellt: Mixin hinzufügen";
    dies.hallo();
  },
  Methoden: {
    hallo: Funktion () {
      console.log("Hallo vom Mixin!");
    },
  },
};
// Definieren Sie eine Komponente, die ein Mixin-Objekt verwendet. Exportieren Sie standardmäßig {
  Name: "mixin-basic",
  Mixins: [myMixin],
};
</Skript>

<Vorlage>
  <div Klasse="Ereignisstil">
    <h2>Optionen zusammenführen</h2>
    <div Klasse="innere_Kinder">
      <span>{{ Nachricht }}</span>
      <span>{{ Nachricht1 }}</span>
    </div>
  </div>
</Vorlage>
<Skript>
var meinMixin = {
  Daten() {
    zurückkehren {
      Nachricht: "mixin:mixin",
      Nachricht1: "mixin:mixin-1",
    };
  },
  erstellt: Funktion () {
    dies.hallo();
  },
  Methoden: {
    hallo: Funktion () {
      console.log("mixin:Hallo von mixin!");
    },
  },
};
// Definieren Sie eine Komponente, die ein Mixin-Objekt verwendet. Exportieren Sie standardmäßig {
  Name: "Mixin-Merge",
  Mixins: [myMixin],
  Daten() {
    zurückkehren {
      Nachricht: "Komponente: Hallo",
    };
  },
  erstellt: Funktion () {
    dies.hallo();
  },
  Methoden: {
    hallo: Funktion () {
      console.log("Komponente: Hallo Welt!");
    },
  },
};
</Skript>
<Stilbereich>
.Ereignisstil {
  Polsterung links: 50px;
  Polsterung rechts: 50px;
}
.innere_kinder {
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Höhe: 150px;
  Rand: 1px durchgezogen #333;
  Polsterung: 6px;
}
.inner_children Spanne {
  Schriftgröße: 20px;
}
</Stil>