Detaillierte Erklärung zur Verwendung von Vue-Mixin

Standard exportieren {
  Daten () {
    zurückkehren {
      msg: „Ich bin msg im Mixin“
    }
  },
  erstellt () {
  },
  montiert () { },
  Methoden: {
  }
}

<Vorlage>
  <div>
    <div>home -- {{ msg }}</div> /* Nachricht von home geändert */
  </div>
</Vorlage>
<Skript>
importiere Mixin aus "@/mixin/index.js";
Standard exportieren {
  Name: "Home",
  Mixins: [Mixin],
  Daten() {
    zurückkehren { };
  },
  erstellt() {
    // Daten von Mixin abrufen console.log("home print", this.msg); //home druckt „Ich bin die Nachricht“ in Mixin
    // Ändern Sie die Daten des Mixins. this.msg = "msg modified by home";
    console.log("home print", this.msg); // home druckt die von home geänderte Nachricht
  },
  Methoden: {
  },
};
</Skript>
<style lang="scss" scoped>
</Stil>

<Vorlage>
  <div>
    <div>about2 -- {{ msg }}</div> /* Nachricht geändert von about2 */
  </div>
</Vorlage>
<Skript>
importiere Mixin aus "@/mixin/index.js";
Standard exportieren {
  Name: "About2",
  Mixins: [Mixin],
  Komponenten: {},
  Daten() {
    zurückkehren {
      msg: "lokale Nachricht",
    };
  },
  erstellt() {
    console.log("print about2", this.msg); // lokale Nachricht
    this.msg = "Nachricht geändert von about2";
    console.log("print about2", this.msg); // Nachricht geändert von about2
    // Die letzte Seite zeigt die geänderten Nachrichtendaten von about2},
  Methoden: {
  },
};
</Skript>
<style lang="scss" scoped>
</Stil>

Standard exportieren {
  Daten () {
    zurückkehren {
      msg: „Ich bin msg im Mixin“
    }
  },
  erstellt () { },
  montiert () { },
  berechnet: {
    Benutzername() {
      return "Ich bin das berechnete Attribut Benutzername";
    },
  },
  Methoden: {
    tipMsg() {
      console.log("tipMsg-Methode in Minxin", this.msg);
    },
    tipInfo (info) {
      console.log("tipInfo-Methode in Minxin", info);
    }
  }
}

<Vorlage>
  <div>
    <div>home --- msg-{{ msg }} Benutzername-{{ Benutzername }}</div>
    /* home --- msg UserName-I bin der Benutzername des berechneten Attributs */
  </div>
</Vorlage>
<Skript>
importiere Mixin aus "@/mixin/index.js";
Standard exportieren {
  Name: "Home",
  Mixins: [Mixin],
  Komponenten: {},
  Daten() {
    zurückkehren {};
  },
  erstellt() {
    // Daten von Mixin abrufen console.log("home print", this.msg); //home druckt „Ich bin die Nachricht“ in Mixin
    // Ändern Sie die Daten des Mixins. this.msg = "msg modified by home";
    console.log("home print", this.msg); // home druckt die von home geänderte Nachricht
    //Rufen Sie die Methode tipMsg im Mixin auf this.tipMsg(); //Die von der Methode tipMsg home in minxin geänderte Nachricht
    this.tipInfo("Ich bin ein Home-Rookie-Info"); // tipInfo-Methode in minxin Ich bin ein Home-Rookie-Info
  },
  Methoden: {},
};
</Skript>
<style lang="scss" scoped>
</Stil>

<Vorlage>
  <div>
    <div>about2 -- {{ msg }} Benutzername-{{ Benutzername }}</div>
    /* about2 -- about2 geänderte Nachricht UserName-I ist das berechnete Attribut UserName */
  </div>
</Vorlage>
<Skript>
importiere Mixin aus "@/mixin/index.js";
Standard exportieren {
  Name: "About2",
  Mixins: [Mixin],
  Komponenten: {},
  Daten() {
    zurückkehren {
      msg: "lokale Nachricht",
    };
  },
  erstellt() {
    console.log("print about2", this.msg); // lokale Nachricht
    this.msg = "Nachricht geändert von about2";
    console.log("print about2", this.msg); // Nachricht geändert von about2
    // Die letzte Seite zeigt die geänderte Nachricht von about2. Diese Daten sind this.tipMsg(); // Der letzte Ausdruck-> Ich bin die lokale tipMsg-Methode von about2. This.tipInfo(); // Die tipInfo-Methode in minxin ist nicht definiert.
  },
  Methoden: {
    tipMsg() {
      console.log("Ich bin die lokale tipMsg-Methode von about2");
    },
  },
};
</Skript>