Detaillierte Erläuterung der sieben Wertübertragungsmethoden von Vue

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

Artikel empfehlen

Ein ausführliches Tutorial zur Installation von Jenkins auf Docker für Anfänger

Jenkins ist ein Open-Source-Softwareprojekt. Es h...

Detaillierte Einführung in die Linux-Hostnamenkonfiguration

Inhaltsverzeichnis 1. Konfigurieren Sie den Linux...

Vue öffnet ein neues Fenster und implementiert ein grafisches Beispiel für die Parameterübergabe

Die Funktion, die ich erreichen möchte, besteht d...

Beispielcode zur Implementierung der Bereitstellung mehrerer Anwendungen mit Tomcat+Nginx

Inhaltsverzeichnis Bereitstellung mehrerer Anwend...

Lösung für das MySQL IFNULL-Beurteilungsproblem

Problem: Die von mybatis zurückgegebenen Daten vo...

So generieren Sie eine Vue-Benutzeroberfläche per Drag & Drop

Inhaltsverzeichnis Vorwort 1. Technisches Prinzip...

Beispiel für die Verwendung von JSX zum Erstellen einer Komponentenparserentwicklung

Inhaltsverzeichnis Aufbau einer JSX-Umgebung Einr...

Das Implementierungsprinzip des Zabbix-Sammelskripts zur dynamischen Ausführungsüberwachung

Wenn Sie benutzerdefinierte Zabbix-Skripte zum Sa...

Ein vollständiges Tutorial zur Verwendung der Axios-Kapselung in Vue

Vorwort Heutzutage wird in Projekten häufig die A...

Eine kurze Diskussion über die Definition und Vorsichtsmaßnahmen von H-Tags

Den Ergebnissen zufolge gibt es für die Definitio...

So erstellen Sie einen Index für eine Join-Tabelle in MySQL

In diesem Artikel wird erläutert, wie Sie einen I...

Erweitert und Zusammenfassung häufig verwendeter SQL-Anweisungen in MySQL-Datenbanken

Dieser Artikel beschreibt anhand von Beispielen d...

So implementieren Sie die Vervollständigung leerer Zellen in HTML-Tabellen

Als ich mir selbst die Webentwicklung beibrachte,...

Javascript-Bereich und Abschlussdetails

Inhaltsverzeichnis 1. Geltungsbereich 2. Geltungs...

Eine detaillierte Einführung in die Bereitstellung einer RabbitMQ-Umgebung mit Docker

Voraussetzungen: Docker ist bereits installiert 1...