Wie kommuniziere ich zwischen übergeordneten und untergeordneten Vue-Komponenten? Vier Kommunikationsmethoden zwischen übergeordneten und untergeordneten Vue-Komponenten

Der Inhalt dieses Artikels befasst sich mit der Kommunikation zwischen übergeordneten und untergeordneten Vue-Komponenten. Die vier Kommunikationsmethoden zwischen Vue-Eltern- und Kinderkomponenten haben einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

Derzeit gibt es vier Möglichkeiten der Eltern-Kind-Kommunikation:

1. Die übergeordnete Komponente gibt Daten an die untergeordneten Komponenten weiter.
Wie werden die Daten der übergeordneten Komponente an die untergeordneten Komponenten übergeben? Dies kann durch das Props-Attribut erreicht werden
Übergeordnete Komponente:

58652436a08d62d32b90566dafe0913c b189eeee14645d7772f2c737ba7338c77d4dd9c7239aac360e401efe89cbb393//这里必须要用 - 代替驼峰db7b8d074c72824ed121864240fe4c81data(){ return { msg: [1,2,3] };}

Untergeordnete Komponente empfängt Daten über Requisiten:
Methode 1:

props: ['childMsg']

Methode 2:

props: { childMsg: Array //这样可以指定传入的类型，如果类型不对，会警告}
props: { childMsg: { type: Array, default: [0,0,0] //这样可以指定默认的值 }}

Auf diese Weise überträgt die übergeordnete Komponente Daten an die untergeordnete Komponente.

2. Die untergeordnete Komponente kommuniziert mit der übergeordneten Komponente
Was wäre, wenn die untergeordnete Komponente möchte die Daten ändern? Dies ist in Vue nicht zulässig, da Vue nur eine unidirektionale Datenübertragung zulässt. Zu diesem Zeitpunkt können wir ein benutzerdefiniertes Ereignis auslösen, um die übergeordnete Komponente zu benachrichtigen, die Daten zu ändern, und so den Zweck der Änderung der untergeordneten Komponentendaten zu erreichen >

Verwenden Sie v-on, um benutzerdefinierte Ereignisse zu binden.

Jede Vue-Instanz implementiert die Ereignisschnittstelle, das heißt:
Verwenden Sie $on(eventName), um auf Ereignisse zu warten.
Verwenden Sie $emit(eventName), um Ereignisse auszulösen

Die übergeordnete Komponente kann v-on direkt verwenden, wobei die untergeordnete Komponente zum Abhören der von der untergeordneten Komponente ausgelösten Ereignisse verwendet wird.

Untergeordnete Komponente:

<template> <div 
@click="up"></div></template>methods: { up() { 
this.$emit(&#39;resultChange&#39;,&#39;hehe&#39;); //主动触发resultChange方法，&#39;hehe&#39;为向父组件传递的数据
 }}

Übergeordnete Komponente:

<div> <child @on-result-change="mychangHandle" 
:msg="msg"></child> 
//监听子组件触发的upup事件,然后调用change方法</div>methods: { mychangHandle(msg) {
 this.msg = msg; }}

Trigger-Ereignis verwendet einen benutzerdefinierten Ereignisnamen im Camel-Case-Format, der im verwendet werden kann Übergeordnete Komponente zum Abhören in der Form „on-evnet-name“.

3. Kommunikation zwischen beliebigen Komponenten
Wie kommunizieren zwei Komponenten, wenn sie keine Eltern-Kind-Komponenten sind? Zu diesem Zeitpunkt kann die Kommunikation über eventHub erfolgen. Der sogenannte eventHub dient dazu, ein Veranstaltungszentrum zu schaffen, das einer Übergabestation entspricht und zur Bereitstellung und zum Empfang von Veranstaltungen verwendet werden kann leere Vue-Instanz als zentraler Ereignisbus:

let Hub = new Vue(); //创建事件中心,注意Hub要放在全局

Komponente 1 löst aus:

<div @click="eve"></div>methods: { eve() { Hub.$emit(&#39;change&#39;,&#39;hehe&#39;); //Hub触发事件 }}

Komponente 2 empfängt:

<div></div>created() { Hub.$on(&#39;change&#39;, () => { //Hub接收事件 this.msg = &#39;hehe&#39;; });}

4 $refs

Trotz Requisiten und Ereignissen müssen Sie manchmal immer noch direkt in JavaScript auf untergeordnete Komponenten zugreifen. Sie können dies tun, indem Sie ref verwenden, um eine Index-ID für die untergeordnete Komponente anzugeben.

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>
var parent = new Vue({ el: &#39;#parent&#39; })
// 访问子组件
var child = parent.$refs.profile

Wenn ref mit v-for verwendet wird, ist ref ein Array oder Objekt, das die entsprechenden Unterkomponenten enthält.

Verwandte Empfehlungen:

So implementieren Sie die Kommunikation zwischen übergeordneten und untergeordneten Vue-Komponenten

Kommunikation zwischen untergeordneten Vue-Komponenten Komponenten und übergeordnete Komponenten Detaillierte Erklärung

Das obige ist der detaillierte Inhalt vonWie kommuniziere ich zwischen übergeordneten und untergeordneten Vue-Komponenten? Vier Kommunikationsmethoden zwischen übergeordneten und untergeordneten Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!