Detaillierte Erläuterung der Kommunikation zwischen nicht übergeordneten und untergeordneten Komponenten in Vue3

Das Geschäftsszenario besteht darin, dass nicht die übergeordneten Komponenten kommunizieren, sondern die untergeordneten Komponenten.

Dateiverzeichnis

Erste Methode

App.vue

<Vorlage>
  <div>
    <Startseite></Startseite>
    <button @click="addName">Name hinzufügen</button>
  </div>
</Vorlage>
 <Skript>
Home aus "./Home.vue" importieren;
importiere { berechnet } von "vue";
Standard exportieren {
  Name: "App",
  Komponenten:
    Heim,
  },
  bieten() {
    zurückkehren {
      Name: "Zhang San",
      Alter: 23,
      Länge: berechnet(() => this.names.length),
    };
  },
  Daten() {
    zurückkehren {
      Namen: ["Zhang San", "Li Si", "Wang Wu"],
    };
  },
  Methoden: {
    addName() {
      this.names.push("fick dich");
      konsole.log("hhhh");
    },
  },
};
</Skript>
 <Stilbereich>
</Stil>

Startseite.vue

<Vorlage>
  <div>
    <div>Ich bin zu Hause</div>
    <Home-Inhalt></Home-Inhalt>
  </div>
</Vorlage>
 <Skript>
HomeContent aus "./HomeContent.vue" importieren;
Standard exportieren {
  Name: "Home",
  Komponenten:
    StartseiteInhalt,
  },
};
</Skript>
 <Stilbereich>
</Stil>

StartseiteContent.vue

<Vorlage>
  <div>HomeContent:{{ Name }}--{{ Alter }}---{{ Länge }}</div>
</Vorlage>
 <Skript>
Standard exportieren {
  injizieren: ["Name", "Alter", "Länge"],
};
</Skript>
 <style lang="scss" scoped>
</Stil>

Verwenden Sie die Provide-Funktion und die Inject-Funktion in vue3

Tatsächlich haben wir Provide und Inject bereits gelernt. Die Composition API kann auch die vorherigen Optionen Provide und Inject ersetzen.

Wir können Daten durch Bereitstellung bereitstellen:

Provide kann zwei Parameter übergeben:

name : der angegebene Attributname;

value : der angegebene Attributwert;

In den abgeleiteten Komponenten können Sie „inject“ verwenden, um die erforderlichen Eigenschaften und die entsprechenden Werte einzufügen:

Sie können „Inject“ verwenden, um den erforderlichen Inhalt einzufügen.

Inject kann zwei Parameter übergeben:

Der Name der einzufügenden Eigenschaft;

Standardwert;

Reaktionsfähigkeit der Daten

Um eine Reaktionsfähigkeit zwischen bereitgestellten und eingefügten Werten hinzuzufügen, können wir beim Bereitstellen von Werten „ref“ und „reactive“ verwenden.

Ändern von responsiven Eigenschaften

Wenn wir responsive Daten ändern müssen, tun wir dies am besten dort, wo die Daten bereitgestellt werden: Wir können die Änderungsmethode gemeinsam nutzen und sie in untergeordneten Komponenten aufrufen.

Beachten

Wenn unsere Unterkomponente ein Status sein soll, der nur verwendet und nicht geändert werden kann

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!