Vue中如何进行非父子组件通信？

当谈及Vue中非父子组件通信时，我们通常会考虑使用Event Bus或者Vuex来实现。以下是我为您准备的一些面试题内容和示例代码：

面试题：“Vue中如何进行非父子组件通信？”

在Vue中，父子组件之间的通信通常是通过props和emit进行的。但是当需要进行非父子组件之间的通信时，我们可以使用以下方式：

1. Event Bus （事件总线）

Event Bus是一种简单但强大的 Vue 实例用于事件派发与监听的组件通信方式。

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

// ComponentA.vue
<template>
    <button @click="sendData">Send Data</button>
</template>

<script>
import { EventBus } from '@/main.js';

export default {
    methods: {
        sendData() {
            EventBus.$emit('data-sent', 'Hello from Component A');
        }
    }
}
</script>

// ComponentB.vue
<template>
    <div>{{ receivedData }}</div>
</template>

<script>
import { EventBus } from '@/main.js';

export default {
    data() {
        return {
            receivedData: ''
        }
    },
    created() {
        EventBus.$on('data-sent', (data) => {
            this.receivedData = data;
        });
    }
}
</script>

2. Vuex

Vuex是Vue.js应用程序开发的状态管理模式，用于管理应用程序中的所有组件的状态。

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

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        data: ''
    },
    mutations: {
        setData(state, payload) {
            state.data = payload;
        }
    }
});

// ComponentA.vue
<template>
    <button @click="sendData">Send Data</button>
</template>

<script>
export default {
    methods: {
        sendData() {
            this.$store.commit('setData', 'Hello from Component A');
        }
    }
}
</script>

// ComponentB.vue
<template>
    <div>{{ receivedData }}</div>
</template>

<script>
export default {
    computed: {
        receivedData() {
            return this.$store.state.data;
        }
    }
}
</script>