<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      // 发送自定义事件
      this.$emit('messageSent', '这是一条消息');
    }
  }
}
</script>

<template>
  <div>
    <p>{{ receivedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedMessage: ''
    };
  },
  created() {
    // 监听来自发送组件的自定义事件
    this.$on('messageSent', this.handleMessage);
  },
  methods: {
    handleMessage(message) {
      // 处理收到的消息
      this.receivedMessage = message;
    }
  }
}
</script>

<script>
export default {
  data() {
    return {
      receivedMessage: ''
    };
  },
  watch: {
    receivedMessage(newValue, oldValue) {
      // 在数据变化时做出响应
      console.log('消息已更新：', newValue);
    }
  },
  created() {
    this.$on('messageSent', this.handleMessage);
  },
  methods: {
    handleMessage(message) {
      this.receivedMessage = message;
    }
  }
}
</script>