实现兄弟组件之间通信： tips：水平线上方和下方是两个子组件，上方组件输入消息内容，点击发送按钮，将内容发送给父组件（$emit）;父组件接收内容后，将消息内容传递给下方子组件(props)

在Vue.js中，实现兄弟组件之间的通信通常有两种方法：通过事件（`$emit`）和通过props。

**1. 使用事件（$emit）**
上方组件（例如`MessageInput`）可以通过`$emit`触发一个自定义事件，比如`sendMessage`：

<template>
  <button @click="send">发送</button>
</template>

<script>
export default {
  methods: {
    send() {
      this.$emit('sendMessage', this.messageContent);
      // 清空输入框
      this.messageContent = '';
    }
  },
}
</script>

在上方组件中，当你点击发送按钮时，会向父组件发出一个包含消息内容的对象。

**2. 父组件接受并传递数据（props）**
父组件（例如`MessageList`）可以监听这个事件，并通过props将消息传递给下方组件（`MessageDisplay`）：

<template>
  <div>
    <MessageInput @sendMessage="displayMessage" />
    <MessageDisplay :message="receivedMessage" />
  </div>
</template>

<script>
import MessageInput from './components/MessageInput.vue';
import MessageDisplay from './components/MessageDisplay.vue';

export default {
  components: { MessageInput, MessageDisplay },
  data() {
    return {
      receivedMessage: '',
    };
  },
  methods: {
    displayMessage(message) {
      this.receivedMessage = message;
    },
  },
};
</script>

当父组件接收到消息后，会将其作为prop传给`MessageDisplay`组件，后者就可以展示接收到的内容了。

**相关问题--:**
1. Vue中除了$emit还有哪些方式进行父子组件间的通信？
2. 当组件层级更复杂时，如何避免事件风暴（Event Emitter Storm）？
3. 如何在Vue的非父子组件间传递数据？