Vue.js中如何存储Emitter.io接收的消息并作为props传给子组件

错误原因分析 #

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'messages')错误，核心原因是Emitter.io的message回调函数里的this指向错误：
使用普通function定义回调时，this会指向Emitter实例而非Vue组件实例，导致无法访问组件的messages数据属性。

修复步骤 #

1. 修正回调函数的this指向

有两种常用方法解决这个问题：

方法一：使用箭头函数（推荐）

箭头函数不会绑定自身的this，会继承外层作用域的this（即Vue组件实例）：

getEmitterMessages() {
  this.emitter.subscribe({
    key: "C0mj7xc3Hhqz5VRyaajkvbrjbvsjvkdbjakN",
    channel: "S1VLWnpMMWtXZBHJLBHjlhjlvVbhjlz9",
    last: 100,
  });
  // 替换普通函数为箭头函数
  this.emitter.on("message", (msg) => {
    console.log("message", msg.asString());
    if (msg.asString().includes("sender")) {
      this.messages.push(JSON.parse(msg.asString()));
    }
  });
  setTimeout(() => {
    this.is_message_loading = false;
  }, 2000);
}

方法二：提前保存组件实例的this

在回调外先把组件的this赋值给变量（比如vm），再在回调里使用该变量：

getEmitterMessages() {
  const vm = this; // 保存组件实例的this
  this.emitter.subscribe({
    key: "C0mj7xc3Hhqz5VRyaajkvbrjbvsjvkdbjakN",
    channel: "S1VLWnpMMWtXZBHJLBHjlhjlvVbhjlz9",
    last: 100,
  });
  this.emitter.on("message", function(msg) {
    console.log("message", msg.asString());
    if (msg.asString().includes("sender")) {
      vm.messages.push(JSON.parse(msg.asString())); // 使用vm访问组件数据
    }
  });
  setTimeout(() => {
    this.is_message_loading = false;
  }, 2000);
}

2. 确保messages是数组类型

你的data里初始把messages设为null，如果Messages.getAllMessages返回非数组值，后续push操作会报错。建议初始化时设为空数组：

data() {
  return {
    channel_data: null,
    messages: [], // 改为空数组
    channel_loading: false,
    is_message_loading: false,
    emitter: null,
  };
}

同时在获取历史消息时，确保返回值为数组：

async getCompleteChat(channel_data) {
  const fetchedMessages = await Messages.getAllMessages(channel_data);
  this.messages = fetchedMessages || []; // 兜底处理，确保是数组
  this.getEmitterMessages();
}

将消息传递给子组件 #

修复存储逻辑后，只需在父组件模板中通过props把messages传递给子组件：

父组件模板

<!-- 假设子组件名为ChatHistory -->
<ChatHistory :messages="messages" />

子组件定义

在子组件中声明接收messages属性：

export default {
  props: {
    messages: {
      type: Array,
      required: true,
      default: () => [] // 兜底默认值
    }
  }
}

子组件内就可以直接使用this.messages获取实时更新的消息列表了。

内容的提问来源于stack exchange，提问作者Syed Yousuf