vue2 kommuniziert über mehrschichtige Komponenten hinweg – Sie können Dispatch und Broadcast verwenden

Einführung

Element-Dispatch und Broadcast sind beide ereignisbezogene Konzepte in JavaScript, aber sie unterscheiden sich etwas:
Element-Dispatch wird verwendet, um Anpassungen für ein bestimmtes HTML-Element zu versenden (d. h. zu initiieren). Verlauf der Ereignisse. Nur bestimmte Elemente erhalten diese Ereignisse.
Broadcast ist eine Möglichkeit, ein Ereignis über die gesamte Seite (oder das gesamte Dokument) zu übertragen und Handler in allen untergeordneten Elementen aufzurufen. In diesem Fall übergibt das übergeordnete Element das Ereignis an seine untergeordneten Elemente, bis es ein Element findet, das das Ereignis verarbeiten kann.
Beim Elementversand wird das Ereignis nur für das Element verarbeitet, an das es gesendet wird. Broadcast ruft den Handler für alle untergeordneten Elemente auf, sodass auf einer Seite mit mehreren Ebenen verschachtelter Elemente möglicherweise mehrere Elemente auf dasselbe Broadcast-Ereignis reagieren.

Kürzlich habe ich bei der Verwendung von zfs-ui-Komponenten (Umschreibelement) festgestellt, dass die Komponentenkommunikation häufig Dispatch- und Broadcast-Methoden verwendet. Schauen wir uns an, wie diese beiden Funktionen implementiert werden.

Codeteil:

emitter.js

function broadcast(componentName, eventName, params) {
    
    
  this.$children.forEach((child) => {
    
    
    const name = child.$options.componentName;

    if (name === componentName) {
    
    
      child.$emit(...[eventName].concat(params));
    } else {
    
    
      broadcast.apply(child, [componentName, eventName].concat([params]));
    }
  });
}
export default {
    
    
  methods: {
    
    
    dispatch(componentName, eventName, params) {
    
    
      let parent = this.$parent || this.$root;
      let name = parent.$options.componentName;

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

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

Code-Analyse:

Sowohl die Versand- als auch die Broadcast-Methode erfordern drei Parameter:

1. KomponentennameKomponentenname;
2. eventNameName des Vorfalls;
3. params Übergebene Parameter.

Die dispatch-Methode durchsucht alle übergeordneten Komponenten, bis sie die Komponente mit dem Namen componentName findet und deren aufruft emit()-Ereignis.
Die Broadcast-Methode durchläuft alle Unterkomponenten der aktuellen Komponente, findet die Unterkomponente mit dem Namen componentName und ruft sie dann auf -Ereignis. emit()

Verwendung

Die Kommunikation zwischen Geschwisterkomponenten kann die beiden oben genannten Ereignisse gut erklären. Nehmen Sie an, dass die übergeordnete Komponente App.vue die beiden untergeordneten Komponenten Hello.vue und Fuck.vue einführt.
Wenn Element zufällig in Ihrem Projekt verwendet wird, können Sie es auf folgende Weise einführen. Wenn Sie Element nicht verwenden, machen Sie sich keine Sorgen, kopieren Sie einfach die oben stehende emitter.js und führen Sie sie ein es durch Mixins. Das ist es.

Hören Sie sich das Nachrichtenereignis in App.vue an. Nach dem Empfang des Ereignisses wird das Ereignis über Broadcast und die empfangenen Parameter an die relevanten Komponenten weitergegeben.

<template>
  <div id="app">
    <hello></hello>
    <fuck></fuck>
  </div>
</template>

<script>
  import Hello from 'components/Hello'
  import Fuck from 'components/Fuck'
  import Emitter from 'element-ui/lib/mixins/emitter'

  export default {
      
      
    name: 'app',
    componentName: 'ROOT',
    mixins: [Emitter],
    components: {
      
      
      Hello,
      Fuck
    },
    created () {
      
      
      this.$on('message', params => {
      
      
        this.broadcast(params.componentName, params.eventName, params.text)
      })
    }
  }
</script>

Der Inhalt von Fuck.vue und Hello.vue ist im Grunde derselbe, nur Fuck.vue ist unten aufgeführt.

import Emitter from 'element-ui/lib/mixins/emitter'
import event from 'mixins/event'

export default {
    
    
  componentName: 'Fuck',
  mixins: [Emitter, event],
  data () {
    
    
    return {
    
    
      name: 'Fuck',
      textarea: '',
      tableData: []
    }
  },
  methods: {
    
    
    submit () {
    
    
      this.communicate('message', {
    
    
        componentName: 'Hello',
        text: this.textarea
      })
      this.textarea = ''
    }
  },
  created () {
    
    
    this.$on('message', text => {
    
    
      this.tableData.push(this.getMessage(text))
    })
  }
}

mixins/event.js

import Emitter from 'element-ui/lib/mixins/emitter'

export default {
    
    
  mixins: [Emitter],
  methods: {
    
    
    communicate (event, params = {
     
     }) {
    
    
      this.dispatch('ROOT', event, Object.assign({
    
    
        eventName: event
      }, params))
    }
  }
}

Fuck.vue hört auf das Nachrichtenereignis und wenn eine Nachricht empfangen wird, wird ein neuer Wert zu tableData hinzugefügt. Die Summit-Methode ruft die Communicate-Methode in event.js auf und gibt das Ereignis über die Dispatch-Methode an die ROOT-Komponente weiter.

Zusammenfassung der Kommunikationsmethoden für Vue-Komponenten

Die übergeordnete Komponente übergibt Informationen mithilfe von „props down“ an die untergeordnete Komponente.
Die untergeordnete Komponente übergibt Informationen mithilfe von „event up“ an die übergeordnete Komponente.
Andere Beziehungstypen Verwenden Sie „Global“ für die Komponentenkommunikation. Ereignisbus
Verwenden Sie Vuex, um zwischen großen SPA-Komponenten zu kommunizieren, um den Komponentenstatus zu verwalten.
Verwenden Sie „dispatch“ und „broadcast“ in emitter.js unter „Element“ für die Richtung Ereignisausbreitung