Summary of the method of communication of non-parent-child components in Vue

introduction

In this, communication between components is the key to building complex applications. Normally, we can pass data down through props and bubble upwards through events ($emit), but when it comes to component communications in non-parent-son relationships, traditional practices seem overwhelming. This article will explore several effective methods of non-parent-child component communication and help readers understand and apply these technologies through specific code examples.

Communication Overview

The main ways of component communication in Vue include: props delivery, event listening, custom events, global event bus, Vuex state management, ref reference, etc. However, when it comes to components spanning multiple levels or components without direct parent-child relationships, more flexible communication methods are required.

Method 1: Global Event Bus

Global event bus is a commonly used non-parent-child component communication method. It allows components to communicate through publish and subscribe events without having to care about hierarchical relationships with each other.

Example 1: Using the global event bus

First, we need to create a global event bus instance:

// 
import Vue from 'vue';
export const EventBus = new Vue();

Then, use this event bus in each component to send and listen for events:

// 
import { EventBus } from './';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('messageEvent', 'Hello from Component A');
    }
  }
};

// 
import { EventBus } from './';

export default {
  created() {
    EventBus.$on('messageEvent', message => {
      (message); // Output: Hello from Component A    });
  },
  beforeDestroy() {
    EventBus.$off('messageEvent'); // Clear the listener to avoid memory leaks  }
};

Method 2: Vuex state management

Vuex is a great choice when applications become complex and involve a large number of shared state among components. Vuex is a state management model and library developed specifically for applications, which makes state management and maintenance easier.

Example 2: Use Vuex for state management

First install and configure Vuex:

npm install vuex --save

Then create the Vuex store:

// store/
import Vue from 'vue';
import Vuex from 'vuex';

(Vuex);

export default new ({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      ++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    doubleCount(state) {
      return  * 2;
    }
  }
});

Next, inject store into the Vue instance:

// 
import Vue from 'vue';
import App from './';
import store from './store';

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

Finally, use Vuex in the component:

// 
export default {
  computed: {
    doubleCount() {
      return this.$;
    }
  },
  methods: {
    incrementCount() {
      this.$('increment');
    }
  }
};

Method 3: Use Refs

Although Refs is mainly used to access child component instances, it can also be used to implement communication between sibling components. By defining refs in the parent component and triggering the method in one of the components, the other component can be indirectly affected.

Example 3: Use Refs for sibling components communication

<template>
  <div>
    <component-a ref="compA"/>
    <component-b ref="compB"/>
  </div>
</template>

<script>
import ComponentA from './';
import ComponentB from './';

export default {
  components: {
    ComponentA,
    ComponentB
  },
  methods: {
    triggerMethodInCompB() {
      this.$();
    }
  }
};
</script>

Method 4: Customize events and slots

Although this method is mainly used for parent-child component communication, in some cases, communication between non-parent-child components can also be achieved through clever design. For example, one component can act as an intermediary, accept input from other components and pass it out through slots.

Example 4: Use custom events and slots

<template>
  <div>
    <child-component>
      <template v-slot:output="{ value }">
        <span>{{ value }}</span>
      </template>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './';

export default {
  components: {
    ChildComponent
  },
  methods: {
    sendValueToSlot(value) {
      this.$emit('value-for-slot', value);
    }
  }
};
</script>

<!--  -->
<template>
  <div>
    <input type="text" @change="updateValue($)">
    <slot :value="value"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    };
  },
  methods: {
    updateValue(val) {
       = val;
      this.$emit('value-for-slot', val);
    }
  }
};
</script>

Tips in actual development

In actual development, it is crucial to choose the right way of communication of components. Here are some suggestions:

1. Minimize state dispersion: Try to centrally manage public states and use Vuex or other state management libraries.
2. Avoid overuse of global event bus: Although the global event bus is convenient, if overuse can lead to difficult-to-trace problems, it is recommended to limit simple cross-component communication.
3. Use Refs reasonably: Use Refs when you need to access the component instance directly, but be careful not to over-depend.
4. Refactoring and modularization: If complex communication needs are found between components, consider whether the functions can be modularized through reconstruction to reduce communication complexity.

Through the above introduction and examples, we have learned a variety of ways to communicate non-parent-child components in Vue and learn how to apply these techniques in real-world projects. I hope this information will help you become more handy in future development.

This is the article about the method of communication of non-parent-child components in Vue. For more related content on communication of non-parent-child components, please search for my previous articles or continue browsing the following related articles. I hope everyone will support me in the future!