Wie implementiert man Kommunikation in vue2.0?

In diesem Artikel wird hauptsächlich der Implementierungscode der Vue2.0-Geschwisterkomponentenkommunikation (Peer-Level) vorgestellt. Er ist sehr gut und hat Referenzwert.

1, Vorspiel

Werfen wir einen Blick auf die ersten beiden Artikel:

Übergeordnete Komponente wird an untergeordnete Komponente übergeben

Unterkomponente wird an übergeordnete Komponente übergeben Komponente

Schau dir das Bild an, schau dir das Bild an, schau dir das Bild an! ! !

Persönliches Verständnis:

Das ist offensichtlich so, als würde der jüngere Bruder den älteren Bruder im Leben anrufen. Beide Parteien brauchen Mobiltelefone und Signalübertragungstürme.

• Brother=> A-Komponente

• Brother=> B-Komponente

• Brother’s Mobile phone=> $emit sendet Daten

• Bruders Mobiltelefon=> Zwischenereigniszeile

• App.vue => Natürlich weiß jeder, dass es die Erde ist

2 . Code

2.1. Erstellen Sie eine neue Zwischenereigniszeile .js unter src/asstes (beachten Sie das Suffix .js)

import Vue from 'Vue'
export default new Vue;

2.2. vue unter src/components

<template>
 <p>
 <h2>A组件</h2>
 <button v-on:click="spot">点一下就传</button>
 </p>
</template>
<script>
 import bus from &#39;../assets/ligature&#39;;
 export default {
 methods: {
 spot: function() {
 //监听A组件中的spot，并发送数据
 bus.$emit("spot", &#39; 没想到吧！！我是A组件&#39;)
 }
 }
 }
</script>

2.3. Erstellen Sie ein neues B.vue

<template>
 <p>
 <h2>B组件</h2>
 <p>结果:{{msg}}</p>
 </p>
</template>
<script>
 import bus from "../assets/ligature";
 export default {
 data() {
 return {
 msg: "这TMD是默认值除非你点一下上面的按钮"
 };
 },
 mounted() {
 var _this = this;
 //监听A组件中的spot，并接受数据
 bus.$on("spot", function(msg) {
 _this.msg = msg;
 });
 }
 };
</script>
<style>
p{
 font-size: 20px;
 color: darkcyan;
}
</style>

2.4 in src/components, registrieren Sie diese beiden Komponenten und fügen Sie die Tags hinzu dieser beiden Komponenten

rrree

3. Wirkung

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Wie deaktiviere ich die Caching-Funktion von Vue-berechneten Eigenschaften? Was sind die spezifischen Schritte?

So lösen Sie das Problem, dass sich der ausgewählte Wert nach dem Ändern des berechneten Attributs in vue nicht ändert. Der spezifische Vorgang ist wie folgt

So lösen Sie die Auswahl-Dropdown-Box-Option des iview-Dislokationsproblems. Die spezifischen Vorgänge lauten wie folgt

So implementieren Sie die Auswahl-Dropdown-Liste über Vue.js, die spezifischen Vorgänge sind wie folgt

Details zur Leistungsoptimierung der React-Komponente erklären

Wie man mit Vue Bilder zuschneidet und gleichzeitig Funktionen vergrößert, verkleinert und dreht ( ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonWie implementiert man Kommunikation in vue2.0?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!