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, wie Vue Werte zurückgibt, um Formulare dynamisch zu generieren und Daten zu übermitteln

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, wie Vue Werte zurückgibt, um Formulare dynamisch zu generieren und Daten zu übermitteln

Langer HTML-Text wird automatisch abgeschnitten, wenn er die Tag-Breite überschreitet

Beispiel für das Hinzufügen und Löschen von Bereichspartitionen in MySQL 5.5

Horizontale und vertikale Zentrierung von DIV und Bildern, kompatibel mit mehreren Browsern

Detaillierte Erklärung zur Verwendung von pt-heartbeat zur Überwachung der MySQL-Replikationsverzögerung

So verhindern Sie, dass Hyperlinks beim Verwenden eines Links springen

Frage zur Webseitenerstellung: Bilddateipfad

Praktische Hinweise zur Installation von Jenkins mit Docker-Compose

Konfigurationslösung für die MySQL Dual-Master-Architektur (Master-Master)

JavaScript implementiert Konstellationsabfragefunktion mit detailliertem Code

Artikel empfehlen

Eine kurze Analyse der grundlegenden Implementierung von Vue-Erkennungsdatenänderungen

33 Eis- und Schnee-Schriftarten zum Download empfohlen (privat und kommerziell)

Verwenden von Textschatten- und Elementschatteneffekten in CSS

MySQL 8.0.16 Installations- und Konfigurations-Tutorial unter Windows 10

Das WeChat-Applet realisiert den Neun-Quadrat-Rastereffekt

Eine kurze Diskussion über den MySQL B-Tree-Index und die Indexoptimierungszusammenfassung

Mehrere praktische Szenarien zur Implementierung der Ersetzungsfunktion in MySQL

Einführung und Installation von MySQL Shell

Lassen Sie Ihren Text mit dem Marquee-Attribut in HTML tanzen

Nginx Reverse Proxy Springboot JAR-Paket-Prozessanalyse

Der Prozess der JDK-Installation und Konfiguration von Umgebungsvariablen unter WIN10 (detaillierte Version)

Der Unterschied zwischen distinct und group by in MySQL

Beispiel zum Erstellen eines öffentlichen Harbor-Repository mit Docker

Detaillierte Erläuterung der Prinzipien und der Verwendung von gespeicherten MySQL-Prozeduren

Tutorial zur Verarbeitung statischer Ressourcen in Tomcat