Bezüglich der Implementierung des Versandmechanismus zwischen übergeordneten und untergeordneten Vue2.0-Komponenten (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich der Ereignisverteilungsmechanismus zwischen übergeordneten und untergeordneten Vue2.0-Komponenten vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Jeder, der von vue1.x kommt, weiß, dass in vue2.0 $dispatch und $broadcase für die Ereigniskommunikation zwischen übergeordneten und untergeordneten Komponenten entfernt wurden. Die offizielle Überlegung ist, dass die auf der Komponentenbaumstruktur basierende Ereignisflussmethode wirklich schwer zu verstehen ist und mit zunehmender Komponentenstruktur immer spröder wird. Vor allem, wenn die Komponentenhierarchie relativ tief ist. Durch den Mechanismus der Ausstrahlung und Veranstaltungsverteilung erscheint es verwirrender.

Der Beamte hat uns zwar abgeschafft, aber auch Ersatzlösungen bereitgestellt, einschließlich der Instanziierung einer leeren Vue-Instanz und der Verwendung von $emit, um auf Zustandsänderungen von Unterkomponenten zu reagieren

1. Verwenden Sie $emit um das Ereignis

helloWorld.vue als übergeordnete Komponente auszulösen, und die Variable dialogConfigVisible steuert die Anzeige oder das Ausblenden des Popup-Fensters der Unterkomponente.

configBox.vue wird als Unterkomponente verwendet, vorausgesetzt, es handelt sich um ein gekapseltes Ankündigungs-Popup-Fenster.

In der übergeordneten Komponente helloWorld.vue

< template/>

  <config-box
   :visible="dialogConfigVisible"        
   @listenToConfig="changeConfigVisible"
 > </config-box>

script

 data(){
  return {
   dialogConfigVisible:true
  }
 }
  methods: {
   changeConfigVisible(flag) {
     this.dialogConfigVisible = flag;
   }
  }

Dann in der untergeordneten Komponente configBox.vue , Verwenden Sie hauptsächlich bei jedem Ereignisrückruf $emit, um das benutzerdefinierte listenToConfig-Ereignis auszulösen. Anschließend können Sie Parameter hinzufügen und an die übergeordnete Komponente übergeben. Wenn Sie beispielsweise im Popup-Fenster der untergeordneten Komponente zum Schließen auf × klicken, wird die übergeordnete Komponente helloWorld.vue benachrichtigt, dass ich sie schließen möchte. Dies dient hauptsächlich dazu, der übergeordneten Komponente das Ändern der entsprechenden Statusvariablen und die Übergabe von false zu erleichtern das benutzerdefinierte Ereignis.

Skript

methods:{
 dialogClose() {
  this.show = false;
  this.$emit("listenToConfig", false)
 }
}

Lösen Sie in der untergeordneten Komponente aktiv das listenToConfig-Ereignis aus und übergeben Sie den Parameter false, um der übergeordneten Komponente mitzuteilen, dass das Dialogfeld helloWorld.vue bald geschlossen wird. Hier können Sie verhindern, dass sich der Status in der übergeordneten Komponente nicht geändert hat und das Dialogfeld automatisch angezeigt wird, wenn die Seite erneut aktualisiert wird.

2. Instanziieren Sie einen leeren Vue-Instanzbus

Hier wird eine leere Vue-Instanz instanziiert, hauptsächlich um die Kommunikation zwischen untergeordneten Komponenten und übergeordneten Komponenten über den Bus einheitlich zu verwalten Erstellen Sie als Medium zuerst eine bus.js-Datei, erstellen Sie ein Objekt darin, die übergeordnete Komponente ist table.vue, die untergeordnete Komponente ist tableColumn.vue

 // bus.js
 import Vue from "vue";
 export var bus = new Vue({
   data:{
    scrollY:false
   },
   methods:{
    updateScrollY(flag){
     this.scrollY = flag;
    }
   }
  })

und führen Sie sie dann jeweils ein:

 // table.vue
 <script>
 import {bus} from "./bus"
  export default {
   created(){
    bus.$on(&#39;getData&#39;,(argsData)=>{
     // 这里获取子组件传来的参数
     console.log(argsData);
     })

   }
  }

 </script>

 // tableColumn.vue
 <script>
  import {bus} from "./bus"
  export default{
   methods(){
    handleClick(){
     bus.$emit(&#39;getData&#39;,{data:"from tableColumn!"})
    }
   }
  }
 </script>

oben In der übergeordneten Komponente verwendet die übergeordnete Komponente den Bus, um das Listening-Ereignis getData zu registrieren. Sobald eine Zustandsänderung in der untergeordneten Komponente auftritt, wird das entsprechende Ereignis auf dem Bus ausgelöst.

Diese Methode der Verwendung leerer Instanzen entspricht der Erstellung eines Event Centers, daher eignet sich diese Art der Kommunikation auch für die Kommunikation zwischen Nicht-Eltern-Kind-Komponenten,

3 -Ebenen-Eltern-Kind-Komponentenkommunikation

Manchmal sind die beiden Komponenten, die möglicherweise kommunizieren möchten, keine direkten Eltern-Kind-Komponenten, sondern Großvater und Enkel oder Eltern-Kind-Komponenten, die sich über mehrere Ebenen erstrecken

Es ist für Unterkomponenten unmöglich, Parameter Ebene für Ebene nach oben zu übergeben, um den Zweck der Kommunikation zu erreichen, obwohl die Kommunikation, die wir jetzt verstehen, auf diese Weise weitergeleitet wird. Sie können die While-Schleifen weiter nach oben durchlaufen, bis Sie die übergeordnete Zielkomponente gefunden haben, und dann das Ereignis für die entsprechende Komponente auslösen.

Das Folgende ist ein von element-ui implementiertes Eltern-Kind-Komponenten-Kommunikations-Mixin, das eine große Rolle bei der Komponentensynchronisierung spielt. Diese Komponentenkommunikation wird auch in der Übersicht über die Vorteile von element-ui ausdrücklich erwähnt.

function broadcast(componentName, eventName, params) {

 // 向下遍历每个子节点，触发相应的向下广播的 事件
 this.$children.forEach(child => {
  var name = child.$options.componentName;

  if (name === componentName) {
   child.$emit.apply(child, [eventName].concat(params));
  } else {
   broadcast.apply(child, [componentName, eventName].concat([params]));
  }
 });
}
export default {
 methods: {
   // 向上遍历父节点，来获取指定父节点，通过$emit 在相应的 组件中触发 eventName 事件
  dispatch(componentName, eventName, params) {
   var parent = this.$parent || this.$root;
   var name = parent.$options.componentName;
   // 上面的componentName 需要在每个vue 实例中额外配置自定义属性 componentName,
   //可以简单替换成var name = parent.$options._componentTag;

   while (parent && (!name || name !== componentName)) {
    parent = parent.$parent;

    if (parent) {
     name = parent.$options.componentName;
    }
   }
   if (parent) {
    parent.$emit.apply(parent, [eventName].concat(params));
   }
  },
  broadcast(componentName, eventName, params) {
   broadcast.call(this, componentName, eventName, params);
  }
 }
};

Definieren Sie zunächst zwei verschachtelte Komponenten f1.vue und c1.vue. Das Beispiel lautet:

 <f1>
  <c1></c1>
 </f1>

Dann Definieren Sie jeweils zwei übergeordnete und untergeordnete Komponenten:

c2.vue

 <template>
   <section>
   <button type="button" name="button" @click="dispatchTest">点击一下，就可以</button>
  </section>
 </template>
<script type="text/javascript">
import Emitter from "../mixins/emitter";
export default {
name: "c2",
mixins: [Emitter],
componentName:&#39;c2&#39;,
methods: {
 dispatchTest() {
  this.dispatch(&#39;f1&#39;, &#39;listenerToC1&#39;, false);
 }
}
}
</script>

f1.vue

<template type="html">
 <p class="outBox-class">
  <slot>
  </slot>
 </p>
</template>

<script type="text/javascript">
import Emitter from "../mixins/emitter";
export default {
name: "f1",
mixins: [Emitter],
componentName: &#39;f1&#39;,
mounted() {
 this.$on("listenerToC1", (value) => {
   alert(value);
 })
}
}
</script>

Auf diese Weise können Sie auf die Schaltfläche in der untergeordneten Komponente klicken, um das auszulösen listenerToC1-Ereignis und in der übergeordneten Komponente Dieses Ereignis wird in der Komponente überwacht.

ähnelt tatsächlich eher dem $emit-Triggerereignis. Der Unterschied besteht darin, dass es auf mehreren Ebenen verschachtelt werden kann und nicht unbedingt direkte Eltern-Kind-Komponenten ausgelöst werden können.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Wie formatiere ich die aktuelle Zeit mit js?

Verwendung von Vue zur Einführung von CSS, weniger verwandte Probleme

So führen Sie öffentliche CSS-Dateien über Vue ein

Welche Methoden gibt es für die Verwendung von Ajax in Vue?

Das obige ist der detaillierte Inhalt vonBezüglich der Implementierung des Versandmechanismus zwischen übergeordneten und untergeordneten Vue2.0-Komponenten (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!