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 Wissenspunkte zu Linux Netfilter/Iptables

Artikel

Detaillierte Erläuterung der Architektur und Funktionen von InnoDB (Zusammenfassung der Lesehinweise zur InnoDB-Speicher-Engine)

Artikel

Detaillierte Erläuterung der häufig verwendeten Filter von Tomcat

Python stellt eine Verbindung zur Datenbank her MySQL dekomprimierte Version Installationskonfiguration und aufgetretene Probleme

Einführung Heute habe ich gelernt, wie man mit Py...

Detaillierte Erläuterung zum Einrichten einer statischen IP-Netzwerkkarte für die virtuelle CentOS 8-VMware-Maschine für den Zugriff auf das Internet

Erster Schritt: Klicken Sie in VMware auf "B...

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 Wissenspunkte zu Linux Netfilter/Iptables

Detaillierte Erläuterung der Architektur und Funktionen von InnoDB (Zusammenfassung der Lesehinweise zur InnoDB-Speicher-Engine)

Detaillierte Erläuterung der häufig verwendeten Filter von Tomcat

CSS erreicht hochadaptiven Vollbildmodus

HTML-Grundlagen - CSS-Stylesheets, Style-Attribute, Format- und Layoutdetails

Grafisches Tutorial zur kostenlosen Installationsversion von MySQL 5.7.17 winx64

Entwerfen Sie einen Datensammler mit Vue

Tutorial zur Installation und Nutzungskonfiguration von Docker+nacos+seata1.3.0

Node implementiert Suchfeld für Fuzzy-Abfragen

Nodejs-Fehlerbehandlungsprozessaufzeichnung

Artikel empfehlen

UDP DUP-Timeout UPD-Portstatus-Erkennungscodebeispiel

Detaillierte Erklärung der MySQL-Grundoperationen (Teil 2)

Eine kurze Erläuterung der ifnull()-Funktion ähnlich der nvl()-Funktion in MySQL

HTML-Tags dl, dt, dd zum Erstellen einer Tabelle vs. Tabellenerstellungstabelle

Mehrere Möglichkeiten, „Textüberlaufkürzung und -auslassung“ mit reinem CSS zu implementieren

Python stellt eine Verbindung zur Datenbank her MySQL dekomprimierte Version Installationskonfiguration und aufgetretene Probleme

Detaillierte Erläuterung zum Einrichten einer statischen IP-Netzwerkkarte für die virtuelle CentOS 8-VMware-Maschine für den Zugriff auf das Internet

So entwerfen und erstellen Sie adaptive Webseiten

MySQL-Operationen: Operationen mit JSON-Datentyp

Zusammenfassung der sieben MySQL JOIN-Typen

MySql 8.0.16-win64 Installations-Tutorial

Lösung zur inkonsistenten Anzeige der Cursorgröße im Eingabefeld

Zwei Möglichkeiten zum Beenden von Bash im Docker-Container unter Linux

Methoden und Schritte für den Zugriff auf die Baidu Maps API mit JavaScript

Einführung in die schnelle Docker-Bereitstellung eines SpringBoot-Projekts