Vue2 components communicate using Dispatch and broadcast

Recently, in the process of using Element, WE found that the two methods of dispatch and broadcast are widely used in component communication. It was also mentioned in vue2 component communication that the two important events of $dispatch and $broadcast are cancelled in VUe2. Element reimplements both functions.

The code addresses are placed in elder-ui /lib/mixins/ Emitter

emitter.js

"use strict"; exports.__esModule = true; function _broadcast(componentName, eventName, params) { this.$children.forEach(function (child) { var name = child.$options.componentName; if (name === componentName) { child.$emit.apply(child, [eventName].concat(params)); } else { _broadcast.apply(child, [componentName, eventName].concat([params])); }}); } exports.default = { methods: { dispatch: function dispatch(componentName, eventName, params) { var parent = this.$parent || this.$root; var name = parent.$options.componentName; while (parent && (! name || name ! == componentName)) { parent = parent.$parent; if (parent) { name = parent.$options.componentName; } } if (parent) { parent.$emit.apply(parent, [eventName].concat(params)); } }, broadcast: function broadcast(componentName, eventName, params) { _broadcast.call(this, componentName, eventName, params); }}};Copy the code

parsing

Both the dispatch and broadcast methods require three parameters: componentName componentName, eventName eventName, and parameters passed by params.

The Dispatch method looks for all the parent components until it finds one named componentName and invokes its $emit() event. The broadcast method iterates through all the children of the current component, finds the child named componentName, and invokes its $emit() event.

In vue1, $Dispatch and $broadcast notify all parent and child components of events, which can (but do not necessarily) trigger as long as they listen for related events. Element, on the other hand, is more of a directional blast, hitting it where it pleases, which is more in tune with our everyday needs.

use

Communication between sibling components is a good explanation of both events. Assume that two child components Hello. Vue and Fuck. Vue are introduced into the parent component app. vue. If you happen to use Element in your project, you can include it as follows. If you don’t use Element, don’t worry, copy the emitters. Js and introduce it as mixins.

Vue listens for message events. After receiving events, broadcast and received parameters are used to direct the events to related components.

<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>Copy the code

Pfuck. Vue is basically the same as Hello.vue, only pfuck. Vue is listed below

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))
    })
  }
}Copy the code

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))
    }
  }
}Copy the code

Pfuck. Vue listens for message events and adds new values to tableData when a message is received. The Summit method, on the other hand, calls the Communicate method in Event.js to propagate events to the ROOT component via the Dispatch method.

Full code address