Antecedents feed

Vue component communication mode many people do not know when to use which way to solve, here to make a note of the need for people

Parent-child component communication

Parent-child component communication is basically prop and EMIT

Prop and emit

  • The father the son
    • Subcomponent Definitionprop, the parent component assigns values by passing parameters
      • The parent component
      <child :defineData='originData' />

data(){
   return {
     originData: 123
   }
}
Copy the code
      • Child components
      prop: {
  defineData: {
      type: Number.default: 0}}Copy the code
  • Child the parent
    • withemitReturns the method name and variable, which the parent component receives
      this.$emit('methodName', val);
Copy the code

Bidirectional binding of parent and child components

If the parent component data needs to be bidirectional bound

  1. with.syncMode Data Synchronization
    <child :defineData.sync='originData' />
Copy the code
  1. withemit 传 update:defineDataThe way of
    this.$emit('update:defineData', newVal);
Copy the code

Intergenerational component communication

Intergenerational component communication typically uses $parent and $children

$parent 和 $children

For example, communication between parent and grandson components

// Grandchild accesses grandchild
this.$parent.$parent.methodName();

// Parent accesses grandchild
this.$children.$children.methodName();
Copy the code

Dojo.provide and inject

Provide and inject if you don’t want to write $parent and $children like crazy

Provide a data in any component, sub-components under the component can receive directly with Inject

// Parent.vue
export default {
    provide() {
        return {
            name: 'Stone'}}}// Child.vue
export default {
   inject: ['name'].mounted() {
       console.log(this.name)
   }
}
Copy the code

Vuex communication

Global variables are defined in vuex state, and mutation and action are manipulated with COMMIT and Dispatch

EventBus event car

You can customize eventBus to be mounted when the component is finished rendering and destroyed when it is destroyed. This method is now commonly used instead of vuex, so I won’t go into detail and put a code here.

/** * This file provides two methods for the event car distribution center *,$get,$off */

import Vue from 'vue';
import { getObjectType } from '@util';

// Event car storage, key is the unique identifier of event car, value is the event car
const BUSES = {};

/** * get the event car instance *@param {*} Key The unique identifier of the event car */
function getInstance(key) {
  let type = getObjectType(key);

  if(type ! = ='string') {
    return new Error('Param Key Must Be String');
  }

  let instance = BUSES[key];
  if(! instance) { instance =new Vue();
    BUSES[key] = instance;
  }

  return instance;
}
/** * Destroy instance *@param {*} Key The unique identifier of the event car */
function destroyedInstance(key) {
  let type = getObjectType(key);

  if(type ! = ='string') {
    return new Error('Param Key Must Be String');
  }

  let instance = BUSES[key];
  if (instance) {
    instance.$off();
    BUSES[key] = null;
  }

  return true;
}

export default {
  $get: getInstance,
  $off: destroyedInstance,
};
Copy the code