当前位置：首页 > VUE

vue实现消息接收

2026-02-11 03:24:13VUE

Vue 实现消息接收的方法

在 Vue 中实现消息接收通常涉及以下几种场景：WebSocket 实时通信、事件总线（Event Bus）或父子组件通信。以下是具体实现方式。

WebSocket 实时通信

安装 WebSocket 客户端库（如 socket.io-client）：

npm install socket.io-client

在 Vue 组件中建立连接并监听消息：

import io from 'socket.io-client';

export default {
  data() {
    return {
      socket: null,
      messages: []
    };
  },
  created() {
    this.socket = io('http://your-websocket-server-url');
    this.socket.on('message', (data) => {
      this.messages.push(data);
    });
  },
  beforeDestroy() {
    this.socket.disconnect();
  }
};

事件总线（Event Bus）

创建一个全局事件总线（通常在 main.js 中）：

vue实现消息接收

import Vue from 'vue';
export const EventBus = new Vue();

在发送组件中触发事件：

import { EventBus } from './event-bus';
EventBus.$emit('message-received', { text: 'Hello!' });

在接收组件中监听事件：

vue实现消息接收

import { EventBus } from './event-bus';
export default {
  created() {
    EventBus.$on('message-received', (message) => {
      console.log('Received:', message);
    });
  },
  beforeDestroy() {
    EventBus.$off('message-received');
  }
};

父子组件通信

父组件通过 props 传递数据给子组件：

<template>
  <ChildComponent :message="parentMessage" />
</template>
<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
};
</script>

子组件通过 $emit 向父组件发送消息：

<template>
  <button @click="sendMessage">Send</button>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from child');
    }
  }
};
</script>

父组件监听子组件事件：

<template>
  <ChildComponent @message-sent="handleMessage" />
</template>
<script>
export default {
  methods: {
    handleMessage(msg) {
      console.log('Received:', msg);
    }
  }
};
</script>