Vue.js将websocket中的数据显示到表中，并将数据发送到其他组件

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.value }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="sendData">Send Data to Other Components</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [] // 存储WebSocket数据的数组
    };
  },
  mounted() {
    // 在组件加载完成后建立WebSocket连接
    const socket = new WebSocket("ws://example.com/socket");
    socket.onmessage = event => {
      // 收到新的数据时更新数据数组
      const newData = JSON.parse(event.data);
      this.data.push(newData);
    };
  },
  methods: {
    sendData() {
      // 发送数据到其他组件
      this.$emit("data-updated", this.data);
    }
  }
};
</script>

<template>
  <div>
    <h2>Other Component</h2>
    <ul>
      <li v-for="item in receivedData" :key="item.id">{{ item.value }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedData: [] // 存储接收到的数据的数组
    };
  },
  mounted() {
    // 监听data-updated事件
    this.$root.$on("data-updated", data => {
      this.receivedData = data;
    });
  }
};
</script>