Коммуникация компонента vue2 - с использованием отправки и трансляции

внешний интерфейс JavaScript Element Vue.js

недавно использовалElementВ ходе процесса выясняется, что компонентная коммуникация интенсивно используется.dispatchа такжеbroadcastдва метода, ранееСвязь компонента vue2Также упоминалось, что его отменили в vue2.$dispatchа также$broadcastДва важных события, и Element повторно реализует обе функции.

кодовый адрес вelement-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);
    }
  }
};

Разобрать

dispatchа такжеbroadcastОба метода требуют 3 параметра,componentNameназвание компонента,eventNameназвание события,paramsпереданные параметры.

dispatchметод будет искать все родительские компоненты, пока не найдет имяcomponentNameкомпонент, назовите его$emit()мероприятие.broadcastМетод заключается в обходе всех подкомпонентов текущего компонента и поиске имениcomponentNameдочерний компонент, а затем вызвать его$emit()мероприятие.

Здесь также видно в Elementdispatchа такжеbroadcastотличается, в vue1$dispatchа также$broadcastОн будет уведомлять все родительские/дочерние компоненты о событии, пока они прослушивают соответствующие события, они могут (могут, но не обязательно) запускаться; в то время как Element больше похож на направленный взрыв, который больше соответствует нашим повседневным потребностям. .

Как использовать

Связь между родственными компонентами может быть хорошей интерпретацией двух вышеупомянутых событий. Предполагая родительский компонентApp.vueДва подкомпонента представлены вHello.vueа такжеFuck.vue.
Если вы случайно используете Element в своем проекте, вы можете представить его следующим образом: Если вы не используете Element, не беспокойтесь, скопируйте вышеприведенноеemitter.js, который можно импортировать через примеси.

существуетApp.vueсредний мониторmessageсобытие, после получения события пройтиbroadcastИ полученные параметры, событие направляется для распространения на соответствующие компоненты.

<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>

Fuck.vueа такжеHello.vueСодержание в основном то же самое, только перечисленное нижеFuck.vue

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контролируемыйmessageсобытие, когда сообщение получено, чтобыtableDataДобавьте новое значение в . а такжеsummitметод называетсяevent.jsсерединаcommunicateметод, черезdispatchспособ распространения события наROOTкомпоненты.

полный кодовый адрес

Сводка по взаимодействию компонента Vue

  1. Родительские компоненты передают информацию дочерним компонентам, используя свойства вниз
  2. Дочерние компоненты передают информацию родительским компонентам, используя событие up
  3. Другие компоненты типа отношений взаимодействуют с помощью глобальной шины событий.
  4. Общайтесь между большими компонентами SPA, используя Vuex для управления состоянием компонента.
  5. Используйте диспетчеризацию и широковещательную рассылку в emitter.js в Element для направленного распространения событий.
Категории