两个vue之间如何通信

在两个Vue实例之间进行通信，可以通过以下几种方式来实现：1、使用事件总线（Event Bus），2、通过父子组件通信，3、使用Vuex状态管理，4、通过全局事件监听器，5、使用第三方库如Vue.observable。下面，我将详细解释其中的使用事件总线（Event Bus）的方式。

事件总线（Event Bus）是一种在Vue实例之间传递信息的有效方法。通过创建一个空的Vue实例作为事件总线，两个独立的Vue实例可以通过该总线来发送和接收事件，从而实现通信。

一、使用事件总线（Event Bus）

创建事件总线

首先，需要创建一个空的Vue实例作为事件总线。这个事件总线可以在一个单独的文件中定义，然后在需要通信的Vue实例中引入。
```
// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();
```

发送事件

在一个Vue实例中，通过事件总线发送事件和数据。

// ComponentA.vue
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
<script>
import { EventBus } from './eventBus';
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('messageEvent', 'Hello from ComponentA');
    }
  }
};
</script>

接收事件

在另一个Vue实例中，通过事件总线接收事件和数据。

// ComponentB.vue
<template>
  <div>
    <p>Message: {{ message }}</p>
  </div>
</template>
<script>
import { EventBus } from './eventBus';
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    EventBus.$on('messageEvent', (data) => {
      this.message = data;
    });
  },
  beforeDestroy() {
    EventBus.$off('messageEvent');
  }
};
</script>

二、通过父子组件通信

通过父子组件通信是Vue中最常见的通信方式。它包括父组件向子组件传递数据（props）和子组件向父组件发送消息（事件）。

父组件传递数据给子组件

// ParentComponent.vue
<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  },
  components: {
    ChildComponent
  }
};
</script>

子组件接收数据

// ChildComponent.vue
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

子组件发送事件给父组件

// ChildComponent.vue
<template>
  <div>
    <button @click="sendMessage">Send Message to Parent</button>
  </div>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('messageEvent', 'Hello from Child');
    }
  }
};
</script>

// ParentComponent.vue
<template>
  <div>
    <ChildComponent @messageEvent="handleMessage" />
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  methods: {
    handleMessage(data) {
      console.log(data);
    }
  },
  components: {
    ChildComponent
  }
};
</script>

三、使用Vuex状态管理

Vuex是Vue.js的官方状态管理库，适用于大型应用程序。它通过集中式存储管理应用程序的所有状态。

安装Vuex
```
npm install vuex --save
```

创建Vuex Store

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, payload) {
      state.message = payload;
    }
  },
  actions: {
    updateMessage({ commit }, payload) {
      commit('setMessage', payload);
    }
  }
});

在Vue实例中使用Vuex

// main.js
import Vue from 'vue';
import App from './App.vue';
import { store } from './store';
new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

组件中访问Vuex状态和方法

// ComponentA.vue
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$store.dispatch('updateMessage', 'Hello from ComponentA');
    }
  }
};
</script>

// ComponentB.vue
<template>
  <div>
    <p>Message: {{ message }}</p>
  </div>
</template>
<script>
export default {
  computed: {
    message() {
      return this.$store.state.message;
    }
  }
};
</script>

四、通过全局事件监听器

使用全局事件监听器也是一种在Vue实例之间进行通信的方式。虽然不如事件总线和Vuex常用，但在某些情况下也非常有效。

创建全局事件监听器

// main.js
import Vue from 'vue';
import App from './App.vue';
Vue.prototype.$globalEvent = new Vue();
new Vue({
  render: h => h(App)
}).$mount('#app');

发送事件

// ComponentA.vue
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$globalEvent.$emit('messageEvent', 'Hello from ComponentA');
    }
  }
};
</script>

接收事件

// ComponentB.vue
<template>
  <div>
    <p>Message: {{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    this.$globalEvent.$on('messageEvent', (data) => {
      this.message = data;
    });
  },
  beforeDestroy() {
    this.$globalEvent.$off('messageEvent');
  }
};
</script>

五、使用第三方库如Vue.observable

Vue.observable是Vue 2.6.0+引入的一个全局API，用于创建一个响应式对象。它可以用于在Vue实例之间共享状态。

创建响应式对象

// observable.js
import Vue from 'vue';
export const state = Vue.observable({
  message: ''
});

在组件中使用响应式对象

// ComponentA.vue
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
<script>
import { state } from './observable';
export default {
  methods: {
    sendMessage() {
      state.message = 'Hello from ComponentA';
    }
  }
};
</script>

// ComponentB.vue
<template>
  <div>
    <p>Message: {{ state.message }}</p>
  </div>
</template>
<script>
import { state } from './observable';
export default {
  computed: {
    state() {
      return state;
    }
  }
};
</script>

总结：在Vue实例之间进行通信有多种方法，包括使用事件总线、父子组件通信、Vuex状态管理、全局事件监听器和Vue.observable。选择合适的方法取决于应用的具体需求和复杂度。对于简单的通信需求，事件总线和父子组件通信通常是足够的；而对于复杂的状态管理，Vuex是更好的选择。