Heim > Web-Frontend > js-Tutorial > Hauptteil

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

不言
Freigeben: 2018-09-10 17:43:13
Original
2367 Leute haben es durchsucht

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:

<parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰</parent>data(){ return { msg: [1,2,3] };}
Nach dem Login kopieren

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

props: [&#39;childMsg&#39;]
Nach dem Login kopieren

Methode 2:

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

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;为向父组件传递的数据
 }}
Nach dem Login kopieren

Übergeordnete Komponente:


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

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要放在全局
Nach dem Login kopieren

Komponente 1 löst aus:

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

Komponente 2 empfängt:

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

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
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage