Welche Möglichkeiten gibt es, zwischen Vue-Komponenten zu kommunizieren?

Methode: 1. Kommunizieren Sie über den gemeinsamen Vorfahren „$parent“ oder „$root“; 2. Die übergeordnete Komponente kommuniziert durch Festlegen der Referenz der untergeordneten Komponente. 3. Die Brother-Komponente löst ein benutzerdefiniertes Ereignis über „$emit“ aus emit“ ist der übergebene Wert, und eine andere Geschwisterkomponente lauscht über „$on“ auf das benutzerdefinierte Ereignis.

Die Betriebsumgebung dieses Artikels: Windows 10-System, Vue Version 2.9.6, DELL G3-Computer.

Welche Möglichkeiten gibt es, zwischen Vue-Komponenten zu kommunizieren? 1. Das Konzept der Kommunikation zwischen Komponenten. Bevor wir beginnen, teilen wir das Wort Kommunikation zwischen Komponenten auf. Komponenten. Kommunikation. Jeder kennt diese Komponenten sind vue Eine der leistungsstärksten Funktionen, wir können jede .vue in vue als Komponente betrachten

Kommunikation bezieht sich darauf, dass der Absender Informationen über ein bestimmtes Medium und ein bestimmtes Format an den Empfänger übermittelt, um einen bestimmten Zweck zu erreichen. Im Großen und Ganzen ist jeder Informationsverkehr Kommunikation. Kommunikation zwischen Komponenten bedeutet, dass Komponenten (.vue) Informationen auf irgendeine Weise weitergeben, um einen bestimmten Zweck zu erreichen. Zum Beispiel

Wir verwenden die Tabellenkomponente im UI-Framework, einige Daten kann an die Tabellenkomponente übergeben werden, die im Wesentlichen die Kommunikation zwischen Komponenten bildet. 2. Was wird durch die Kommunikation zwischen Komponenten gelöst? , Sprache, Augen, Berührung und andere Methoden zur Übermittlung von Informationen Heute, mit der rasanten Entwicklung von Wissenschaft und Technologie, wird die Kommunikation im Wesentlichen durch drahtgebundene Telefone, Festnetztelefone, drahtlose Telefone usw. vervollständigt B. Mobiltelefone, das Internet und sogar Videoanrufe

Aus dem obigen Absatz können wir ersehen, dass die Essenz der Kommunikation die Synchronisierung und Weitergabe von Informationen ist

Zurück in Vue hat jede Komponente ihren eigenen Bereich, die Daten zwischen Komponenten können nicht sein geteilt

Aber in der tatsächlichen Entwicklungsarbeit müssen wir Komponenten häufig Daten austauschen lassen, was auch der Zweck der Komponentenkommunikation ist

Lassen Sie sie miteinander kommunizieren, um ein organisches Gesamtsystem zu bilden

2. Klassifizierung der Kommunikation zwischen Komponenten

Die Klassifizierung der Kommunikation zwischen Komponenten kann wie folgt unterteilt werden: Kommunikation zwischen übergeordneten und untergeordneten Komponenten

Kommunikation zwischen Geschwisterkomponenten

Kommunikation zwischen Enkel- und Nachkommenkomponenten

Kommunikation zwischen nicht-relationalen Komponenten

3. Kommunikationslösungen zwischen Komponenten

• Organisieren Sie 8 herkömmliche Kommunikationslösungen in Vue

• Durchgereichte Requisiten

• Ausgelöste benutzerdefinierte Ereignisse $emittieren

• mit ref

EventBusParent oder Root

attrs mit Zuhörern
Provide and Inject
Vuex
• Requisiten übergeben Daten

Anwendbare Szenarien: Die übergeordnete Komponente übergibt Daten an die untergeordnete Komponente

• Die untergeordnete Komponente legt das Props-Attribut fest und definiert die von der übergeordneten Komponente übergebenen Parameter, die empfangen werden sollen

Die übergeordnete Komponente verwendet das Literal im Tag der untergeordneten Komponente, um den Wert zu übergeben

• Kinder .vue

  props:{
      // 字符串形式
   name:String // 接收的类型参数
      // 对象形式
      age:{  
          type:Number, // 接收的类型为数值
          defaule:18,  // 默认值为18
         require:true // age属性必须传递
      }
  }

Father.vue-Komponente
• $emit löst ein benutzerdefiniertes Ereignis aus

Anwendbare Szenarien: Unterkomponentenlieferung Daten werden an die gesendet übergeordnete Komponente

Die untergeordnete Komponente löst das benutzerdefinierte Ereignis über $emit aus. Der zweite Parameter von $emit ist der übergebene WertDie übergeordnete Komponente bindet den Listener, um die von der untergeordneten Komponente übergebenen Parameter abzurufen

Chilfen.vue

this.$emit('add', good)
Father.vue
<Children @add="cartAdd($event)" />

ref

Die übergeordnete Komponente legt die Referenz fest, wenn die untergeordnete Komponente verwendet wird.

Die übergeordnete Komponente erhält die Daten durch Festlegen der Referenz der untergeordneten Komponente

Erstellen Sie einen zentralen Zeitbus-EventBus

Die Geschwisterkomponente löst das benutzerdefinierte Ereignis über $emit aus, und der zweite Parameter von $emit ist der übergebene Wert

Die andere Geschwisterkomponente lauscht über $on

Bus auf das benutzerdefinierte Ereignis. js

<Children ref="foo" />
this.$refs.foo  // 获取子组件实例，通过子组件实例我们就能拿到对应的数据

// 创建一个中央时间总线类
class Bus {
  constructor() {
    this.callbacks = {};   // 存放事件的名字
  }
  $on(name, fn) {
    this.callbacks[name] = this.callbacks[name] || [];
    this.callbacks[name].push(fn);
  }
  $emit(name, args) {
    if (this.callbacks[name]) {
      this.callbacks[name].forEach((cb) => cb(args));
    }
  }
}

// main.js
Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上
// 另一种方式
Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能

Parent oder Root

Bauen Sie eine Kommunikationsverbindung im Ausland über den gemeinsamen Vorfahren $parent oder $root auf Anwendbare Szenarien: Vorfahren vergehen Daten an Nachkommen

Batch nach unten setzen Die übergebenen Attribute $attrs und $listeners

enthalten Attributbindungen (außer Klasse und Stil) im übergeordneten Bereich, die nicht als Requisiten erkannt (und erhalten) werden.

Sie können v-bind="$attrs" übergeben, um interne Komponenten zu übergeben.

Children1.vue
this.$bus.$emit('foo')
Children2.vue
this.$bus.$on('foo', this.handle)

this.$parent.on('add',this.add)

die Komponente durch injizieren

Vorfahrenkomponente

this.$parent.emit('add')

Nachkommende Komponente

inject:['foo'] // Den von der Vorfahrenkomponente übergebenen Wert abrufen

vuex

Anwendbare Szenarien: Komponentendatenübertragung mit komplexen Beziehungen

Vuex fungiert als Container zum Speichern gemeinsamer Variablen.

State wird zum Speichern gemeinsamer Variablen verwendet.

Getter. Sie können einen vom Getter abgeleiteten Status (entspricht einem berechneten Attribut im Speicher) hinzufügen, um gemeinsam genutzte Variablen zu erhalten. Der Wert

mutations ist Wird zum Speichern von Methoden zum Ändern des Status verwendet.

Aktionen werden auch zum Speichern von Methoden zum Ändern des Zustands verwendet, Aktionen basieren jedoch auf Mutationen. Wird häufig für einige asynchrone Vorgänge verwendet

Zusammenfassung

Wählen Sie für die Komponentendatenübertragung der Eltern-Kind-Beziehung props und $emit für die Übertragung aus. Sie können auch ref auswählen.

Für die Komponentendatenübertragung der Geschwisterbeziehung Sie Sie können $bus auswählen, und zweitens können Sie $parent für die Übertragung auswählen

Die Datenübertragung von Vorfahren- und Nachkommenkomponenten kann Attrs und Listener auswählen oder bereitstellen und injizieren

Die Komponentendatenübertragung komplexer Beziehungen kann gemeinsam genutzte Variablen über vuex speichern

[ Verwandte Empfehlungen: „vue.js Tutorial“]

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, zwischen Vue-Komponenten zu kommunizieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!