Various Ways of Communication Between Vue Components - 面试题

In Vue.js, communication between components is a very important topic as it relates to how applications pass data and events among multiple components. Vue provides various methods for component communication, suitable for different scenarios. Below are some common communication methods:

1. Props and Events

This is the most fundamental and widely used method for communication between components. Parent components pass data to child components via props, and child components emit events to parent components.

Example: In the parent component:

vue
<template>
  <Child :parentData="data" @childEvent="handleEvent"/>
</template>

<script>
import Child from './Child.vue';

export default {
  components: { Child },
  data() {
    return {
      data: 'data from parent',
    };
  },
  methods: {
    handleEvent(payload) {
      console.log('Event received from child:', payload);
    },
  },
};
</script>

In the child component:

vue
<template>
  <button @click="sendToParent">Send to Parent</button>
</template>

<script>
export default {
  props: ['parentData'],
  methods: {
    sendToParent() {
      this.$emit('childEvent', 'data from child');
    },
  },
};
</script>

2. Event Bus

Event Bus is a pattern where a Vue instance acts as a central event bus for communication between unrelated components.

Example:

javascript
// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

In the component sending the event:

javascript
import { EventBus } from './eventBus.js';

export default {
  methods: {
    sendEvent() {
      EventBus.$emit('do-something', 'some data');
    },
  },
};

In the component receiving the event:

javascript
import { EventBus } from './eventBus.js';

export default {
  created() {
    EventBus.$on('do-something', data => {
      console.log(data);
    });
  },
};

3. Vuex

Vuex is a state management library for Vue.js, designed to manage shared state across all components, offering a global communication approach.

Example:

javascript
// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: '',
  },
  mutations: {
    updateMessage(state, message) {
      state.message = message;
    },
  },
});

In a component updating the state:

vue
<template>
  <button @click="update">Update Message</button>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations([
      'updateMessage', // Maps this.updateMessage() to this.$store.commit('updateMessage')
    ]),
    update() {
      this.updateMessage('Hello from Component A');
    },
  },
};
</script>

In another component retrieving the state:

vue
<template>
  <div>{{ message }}</div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState([
      'message', // Maps this.message to this.$store.state.message
    ]),
  },
};
</script>

4. Provide / Inject

This is a method for passing data between deeply nested components without propagating props through each intermediate level.

Example: In the ancestor component:

vue
<script>
export default {
  provide() {
    return {
      theme: 'dark',
    };
  },
};
</script>

In any descendant component:

vue
<script>
export default {
  inject: ['theme'],
  mounted() {
    console.log(this.theme); // Outputs: 'dark'
  },
};
</script>

Each communication method has its pros and cons and is suitable for different scenarios and requirements. In practice, developers should choose the appropriate method based on the specific needs of the application.