Vue を使用してコンポーネント通信を実装するにはどうすればよいですか?

<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent :message="message"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello World!'
    };
  }
};
</script>

<template>
  <div>
    <h2>子组件</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent @message="handleMessage"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log(message);
    }
  }
};
</script>

<template>
  <div>
    <h2>子组件</h2>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello World!');
    }
  }
};
</script>

// eventBus.js
import Vue from 'vue';

const EventBus = new Vue();

export default EventBus;

<template>
  <div>
    <h2>组件A</h2>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
import EventBus from './eventBus.js';

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

<template>
  <div>
    <h2>组件B</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import EventBus from './eventBus.js';

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