给我一个Vue组件之间通信的完整代码

当然，我可以给你一个Vue组件之间通信的代码示例。在Vue中，组件之间可以通过事件总线实现通信。事件总线是在Vue实例中创建一个新的Vue实例，用于组件之间的通信。

首先在Vue实例中创建一个事件总线：

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

接着，在需要通信的组件中，可以监听事件并触发事件：

// componentA.vue
<template>
  <div>
    <h2>Component A</h2>
    <button @click="sendEvent">Send Event</button>
  </div>
</template>

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

export default {
  methods: {
    sendEvent() {
      EventBus.$emit('eventA', 'Hello World');
    }
  }
}
</script>

在另一个组件中，可以监听事件并进行处理：

// componentB.vue
<template>
  <div>
    <h2>Component B</h2>
    <p>{{ message }}</p>
  </div>
</template>

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

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

这样，当Component A触发eventA事件时，Component B会接收到并更新message的值。这就完成了Vue组件之间的通信。