Detaillierte Erläuterung der sieben Wertübertragungsmethoden von Vue

1. Vom Vater zum Sohn

Definieren Sie das props Feld in der untergeordneten Komponente und den Typ „Array“ (wenn Sie den Feldwerttyp einschränken müssen, können Sie ihn auch in Form eines Objekts definieren). Wie im folgenden Beispiel gezeigt, mountet die übergeordnete Komponente die untergeordnete Komponente HelloWorld , weist dem title und die untergeordnete Komponente HelloWorld definiert props , das einen Wert namens title enthält, sodass die untergeordnete Komponente den Wert der übergeordneten Komponente verwenden kann.

Übergeordnete Komponente

<Vorlage>
 <div>
 <Hallo Welt :title="msg" />
 </div>
</Vorlage>

<Skript>
importiere HelloWorld aus "../components/HelloWorld.vue";

Standard exportieren {
 Name: "Home",
 Daten() {
 zurückkehren {
  msg: "Musik suchen",
 };
 },
 Komponenten:
 Hallo Welt,
 },
};
</Skript>

Unterkomponenten

<Vorlage>
 <div Klasse="hallo">
 <h1>{{ Titel }}</h1>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Name: "Hallo Welt",
 Requisiten: ["Titel"],
 Daten() {
 zurückkehren {};
 },
};
</Skript>

2. Vom Sohn zum Vater

Um einen Wert von einem untergeordneten an ein übergeordnetes Element zu übergeben, müssen Sie ein Ereignis in der untergeordneten Komponente auslösen. Rufen Sie in diesem Ereignis $emit('父組件的方法名', '傳遞的值') und empfangen Sie dann den übergebenen Wert in der übergeordneten Komponente über ein benutzerdefiniertes Ereignis.

Unterkomponenten

<Vorlage>
 <div Klasse="hallo">
 <h1 @click="add">{{ Titel }}</h1>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Name: "Hallo Welt",
 Requisiten: ["Titel"],
 Daten() {
 zurückkehren {
  Alter:18
 };
 },
 Methoden: {
 hinzufügen(){
  dies.$emit("childEvent", dies.age);
 }
 },
};
</Skript>

Übergeordnete Komponente

<Vorlage>
 <div>
 <HalloWelt @childEvent="parentEvent" :title="msg" />
 </div>
</Vorlage>

<Skript>
importiere HelloWorld aus "../components/HelloWorld.vue";

Standard exportieren {
 Name: "Home",
 Daten() {
 zurückkehren {
  msg: "Musik suchen",
 };
 },

 Methoden: {
 übergeordnetesEreignis(e) {
  konsole.log(e);
 },
 },
 Komponenten:
 Hallo Welt,
 },
};
</Skript>

3. Wertübertragung von Brother-Komponenten

1. Erstellen Sie zunächst eine bus.js Datei new in bus.js eine Vue Instanz, die als mittlere Ebene für die Datenübertragung fungiert.

importiere Vue von „vue“;
exportiere standardmäßig neues Vue;

2. Führen Sie bus.js in Komponente A ein und übergeben Sie Parameter über bus.$emit('事件名','參數')

<Vorlage>
 <div Klasse="hallo">
 <h1 @click="add">{{ Titel }}</h1>
 </div>
</Vorlage>

<Skript>
Bus aus "../publicFn/bus.js" importieren;

Standard exportieren {
 Name: "Hallo Welt",
 Requisiten: ["Titel"],
 Daten() {
 zurückkehren {
  Alter:18
 };
 },
 Methoden: {
 hinzufügen(){
  bus.$emit("Kindereignis", dieses.Alter);
 }
 },
};
</Skript>

3. Verwenden Sie $on('事件名', function(){}) um im mounted Zyklus von Komponente B zu empfangen

<Vorlage>
 <div id='swiper'>
 <button>Ich bin ein Knopf</button>
 </div>
</Vorlage>

<Skript>

Bus aus "../publicFn/bus.js" importieren;

Standard exportieren {
 Name:'Swiper',
 Daten (){
 zurückkehren {

 }
 },
 montiert(){
 bus.$on("childEvent", (e) => {
  console.log(e)
 })
 }
}
</Skript>

4. Übergeordnete Komponenten verwenden Daten und Methoden untergeordneter Komponenten

1. Schreiben Sie das ref Attribut in das Unterkomponenten-Tag

2. Die übergeordnete Komponente kann über this.$refs.id.方法名oder this.$refs.id.屬性名auf die untergeordnete Komponente zugreifen.

Übergeordnete Komponente

<Vorlage>
 <div>
 <HalloWelt :title="msg" ref="hallo" />
 <button @click="parentEvent">Ich bin Vater</button>
 </div>
</Vorlage>

<Skript>
importiere HelloWorld aus "../components/HelloWorld.vue";

Standard exportieren {
 Name: "Home",
 Daten() {
 zurückkehren {
  msg: "Musik suchen",
 };
 },

 Methoden: {
 übergeordnetesEreignis() {
  dies.$refs.hello.add();
  Konsole.log(dies.$refs.hello.age);
 },
 },
 Komponenten:
 Hallo Welt
 },
};
</Skript>

Unterkomponenten

<Vorlage>
 <div Klasse="hallo">
 <h1>{{ Titel }}</h1>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Name: "Hallo Welt",
 Requisiten: ["Titel"],
 Daten() {
 zurückkehren {
  Alter:18
 };
 },
 Methoden: {
 hinzufügen(){
  console.log("Ich bin eine untergeordnete Komponente");
 }
 },
};
</Skript>

5. Untergeordnete Komponenten verwenden die Daten und Methoden übergeordneter Komponenten

In einer untergeordneten Komponente können Sie mit $parent auf die Daten und Methoden der übergeordneten Komponente zugreifen. Wenn die Komponente mehrfach verschachtelt ist, können Sie auch mehrere Ebenen von $parent verwenden.

Übergeordnete Komponente

<Vorlage>
 <div>
 <HalloWelt :title="msg" ref="hallo" />
 </div>
</Vorlage>

<Skript>
importiere HelloWorld aus "../components/HelloWorld.vue";

Standard exportieren {
 Name: "Home",
 Daten() {
 zurückkehren {
  msg: "Musik suchen",
 };
 },

 Methoden: {
 übergeordnetesEreignis() {
  console.log("Ich bin die Methode der übergeordneten Komponente");
 },
 },
 Komponenten:
 Hallo Welt
 },
};
</Skript>

Unterkomponenten

<Vorlage>
 <div Klasse="hallo">
 <h1 @click="add">{{ Titel }}</h1>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Name: "Hallo Welt",
 Requisiten: ["Titel"],
 Daten() {
 zurückkehren {
  Alter:18
 };
 },
 Methoden: {
 hinzufügen(){
  Konsole.log(dies.$parent.msg)
  dies.$parent.parentEvent();
 }
 },
};
</Skript>

6. Vuex-Wertübertragung

Vuex ist ein speziell für Vue.js Anwendungen entwickeltes Zustandsverwaltungsmuster. Es verwaltet den Status aller Komponenten einer Anwendung über einen zentralen Speicher und sorgt durch entsprechende Regeln für vorhersehbare Statusänderungen. Im Allgemeinen ist es für kleine Projekte nicht erforderlich.

6.1, definieren Sie den Laden

importiere Vue von „vue“;
importiere Vuex von „vuex“;

Vue.use(Vuex);

exportiere standardmäßig neuen Vuex.Store({
 Zustand: {
 Schule: "Tsinghua-Universität",
 a:"nett"
 },
 Getter: {
 returnVal(Zustand) {
  returniere Staat.Schule + Staat.a;
 },
 },
 Mutationen:
 Schuleändern(Staat, Wert) {
  Staat.Schule = Wert;
  console.log('Änderung erfolgreich');
 },
 },
 Aktionen: {},
 Module: {}
});

6.2, Montieren

importiere Vue von „vue“;
App aus „./App.vue“ importieren;
Router aus "./router" importieren;
Store aus "./store" importieren;
importiere ElementUI von „element-ui“;
importiere "element-ui/lib/theme-chalk/index.css";
importiere publicFn aus "./publicFn/publicFn";

Vue.config.productionTip = falsch


const url = Prozess.Umgebung.VUE_APP_URL;
Vue.prototype.$url = URL;
Vue.prototype.$publicFn = publicFn;

Vue.use(ElementUI);

neuer Vue({
 Router,
 speichern,
 rendern: h => h(App),
}).$mount('#app')

6.3, Nutzung

<Vorlage>
 <div Klasse="hallo">
 <h1 @click="add">{{ Titel }}</h1>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Name: "Hallo Welt",
 Requisiten: ["Titel"],
 Daten() {
 zurückkehren {
  Alter:18
 };
 },
 Methoden: {
 hinzufügen(){
  console.log(this.$store.state.school);//Wert abrufen//this.$store.commit('changeSchool', 'Peking University');//Wert ändern// console.log(this.$store.getters.returnVal)//Gefilterten Wert abrufen}
 },
};
</Skript>

7. Routing-Wert

7.1 Werte per Abfrage übergeben

Hinweis: Bei dieser Methode gehen die Seitenaktualisierungsparameter nicht verloren und die Parameter werden nach der Adressleiste angezeigt: http://localhost:9000/#/conter?id=10086&name=%E9%B9%8F%E5%A4%9A%E5%A4%9A

Seite A

<Vorlage>
 <div>
 <HalloWelt :title="msg" ref="hallo" />
 <button @click="parentEvent">Springen</button>
 </div>
</Vorlage>

<Skript>
importiere HelloWorld aus "../components/HelloWorld.vue";

Standard exportieren {
 Name: "Home",
 Daten() {
 zurückkehren {
  msg: "Musik suchen",
 };
 },

 Methoden: {
 übergeordnetesEreignis() {
  dies.$router.push({
  Pfad:"/conter",
  Name: 'Zähler',
  Abfrage:{
   Nr.: 10086,
   Name: „Peng Duoduo“
  }
  })
 },
 },
 Komponenten:
 Hallo Welt
 },
};
</Skript>

Seite B

<Vorlage>
 <div id='Zähler'>

 </div>
</Vorlage>

<Skript>

Standard exportieren {
 Name: 'Zähler',
 Daten (){
 zurückkehren {

 }
 },
 erstellt (){
 Konsole.log(diese.$route.query.id, diese.$route.query.name);
 },
}
</Skript>

7.2 Werteübergabe über Parameter

Hinweis: Wenn Sie die Seite auf diese Weise aktualisieren, gehen die Parameter verloren, sie können jedoch empfangen und im sessionStorage gespeichert werden.

A-Seite

<Vorlage>
 <div>
 <HalloWelt :title="msg" ref="hallo" />
 <button @click="parentEvent">Springen</button>
 </div>
</Vorlage>

<Skript>
importiere HelloWorld aus "../components/HelloWorld.vue";

Standard exportieren {
 Name: "Home",
 Daten() {
 zurückkehren {
  msg: "Musik suchen",
 };
 },

 Methoden: {
 übergeordnetesEreignis() {
  dies.$router.push({
  Pfad:"/conter",
  Name:"Zähler",
  Parameter: {
   Nr.: 10086,
   Name: „Peng Duoduo“
  }
  })
 },
 },
 Komponenten:
 Hallo Welt
 },
};
</Skript>

Seite B

<Vorlage>
 <div id='Zähler'>

 </div>
</Vorlage>

<Skript>

Standard exportieren {
 Name: 'Zähler',
 Daten (){
 zurückkehren {

 }
 },
 erstellt (){
 Konsole.log(diese.$route.params.id, diese.$route.params.name);
 },
}
</Skript>

Damit ist dieser Artikel über die sieben Wertübertragungsmethoden von Vue abgeschlossen. Weitere Informationen zu den Wertübertragungsmethoden von Vue finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:

Eine kurze Diskussion über den Vater-Sohn-Werttransfer in Vue3
Detaillierte Erläuterung der Werteübertragung von Vue-Eltern-Kind-Komponenten und der Probleme beim unidirektionalen Datenfluss
Gegenseitiger Wertetransfer und Aufruf von Vue-Eltern-Kind-Komponenten
Einige Fallstricke bei der Wertübertragung von Vue-Eltern-Kind-Komponenten
Beispiel für die Übergabe von Werten zwischen untergeordneten Vue-Komponenten und übergeordneten Komponenten
Vue: Wertübertragung zwischen Vater und Sohn, Wertübertragung zwischen Bruder und Kind, detaillierte Erläuterung

<<: Ein Beispiel für die Verwendung einer MySQL-Anweisung, um die Anzahl der von verschiedenen Ganzzahlen belegten Bytes sowie deren Maximal- und Minimalwerte herauszufinden

>>: Detaillierte Erklärung der grundlegenden Verwendung des SSH-Befehls ssh-keygen

Detaillierte Erläuterung der Lösung für npm ls-Fehler, die durch das fsevents-Modul unter Linux verursacht werden

Detaillierte Erläuterung der sieben Wertübertragungsmethoden von Vue

1. Vom Vater zum Sohn

2. Vom Sohn zum Vater

3. Wertübertragung von Brother-Komponenten

4. Übergeordnete Komponenten verwenden Daten und Methoden untergeordneter Komponenten

5. Untergeordnete Komponenten verwenden die Daten und Methoden übergeordneter Komponenten

6. Vuex-Wertübertragung

7. Routing-Wert

Detaillierte Erläuterung der Lösung für npm ls-Fehler, die durch das fsevents-Modul unter Linux verursacht werden

Reduzieren Sie die Speicher- und CPU-Auslastung durch die Optimierung von Webseiten

Detaillierte Erläuterung des Produktionsprinzips des jQuery-Atemkarussells

Detaillierte Erläuterung der Clientkonfiguration für die Entwicklung von vue3 + electron12 + dll

Vue-Grundlagen-Tutorial: Bedingtes Rendering und Listen-Rendering

Was sind die Unterschiede zwischen CDN, SCDN und DCDN zur Website-Beschleunigung? Wie man wählt?

Richtige Verwendung der Vue-Funktion Anti-Shake und Throttling

MySQLs Methode zum Umgang mit doppelten Daten (Verhindern und Löschen)

So legen Sie das Root-Passwort des Benutzers und die Remote-Verbindungsmethode für die Alibaba Cloud ECS-Instanz fest

So lösen Sie das Problem, dass die Website kein direktes Kopieren von Seiteninhalten oder Informationen zulässt

Artikel empfehlen

Die Frontend-Entwicklung muss jeden Tag lernen, HTML-Tags zu verstehen (1)

Zusammenfassung der Lastausgleichsmethoden von Nginx

Wissen Sie, welche Möglichkeiten es gibt, in Vue Routen zu überspringen?

Tutorial zur Verwendung von Portainer zum Herstellen einer Verbindung mit einem Remote-Docker

MySQL-Startfehler beheben: FEHLER 2003 (HY000): Keine Verbindung zum MySQL-Server auf „localhost“ möglich (10061)

Detailliertes Tutorial zur Installation von mysql-8.0.20 unter Linux

So verwenden Sie VirtualBox zum Erstellen einer lokalen virtuellen Maschinenumgebung auf dem Mac

So konfigurieren Sie die PDFLatex-Umgebung in Docker

Detaillierte Erklärung der Lösung für den 404-Fehler von Tomcat

Der gesamte Prozess der Installation von Gogs mit Pagoda Panel und Docker

So verstehen Sie den Unterschied zwischen ref toRef und toRefs in Vue3

So verwenden Sie CSS-Medienabfragen mit einem geringeren Seitenverhältnis

Mehrere Methoden zum Löschen von Floating (empfohlen)

Grafisches Tutorial zur Installation von mysql5.7.17.msi

Detaillierte Erklärung der Lösung für das Problem, dass die Nohup-Protokollausgabe unter Linux zu groß ist