使用websocket和Vue2中的props实时更新数据方式

export default {
  props: ['message']
}

export default {
  props: {
    message: {
      type: String, // 指定 prop 类型
      required: true, // 标记 prop 为必填
      default: 'default message', // 设置默认值
      validator(value) { // 自定义验证函数
        return value.length <= 10;
      }
    }
  }
}

<template>
    <div>
      <Test :num ="num"></Test>
    <Form class="form"  :num ="num"></Form>
    </div>
</template>
<script>
export default {
// ------
  mounted(){
        // websocket 更新
    this.setupWebSocket();
  },
  methods: {
    setupWebSocket() {
      this.ws = new WebSocket(`ws://localhost:8081/example/ws/${999}`);
      console.log(this.ws);
      this.ws.addEventListener('open', this.openHandle);
      this.ws.addEventListener('message', this.messageHandle);
      this.ws.addEventListener('close', this.closeHandle);
      this.ws.addEventListener('error', this.errorHandle);
    },
    openHandle() {
      console.log('WebSocket连接成功！！！！');
    },
    closeHandle() {
      console.log('WebSocket关闭！！！！');
      if (!this.isHandle) {
        this.restart();
      }
      this.isHandle = false;
    },
    // 收到消息更新数据
    messageHandle(data) {
      console.log('前端接收到消息！！！！',data);
      // 使组件重新加载
      // this.$forceUpdate()
      this.num =this.num + 1  // 数据更新的信号
    },
    errorHandle() {
      console.log('WebSocket出错了！！！！');
      console.log('error');
    },
    sendMessage() {
      console.log('我发送了消息');
      // this.ws.send('请传数据给我！'+input);
    },
    closeWs() {
      this.ws.close();
    },
    restart() {
      console.log('客户端与服务器连接失败，准备重连');
      this.timer = setInterval(() => {
        console.log('重连中...');
        this.ws = new WebSocket(`ws://localhost:8081/example/ws/${999}`);
        if (this.ws.readyState === 1) {
          clearInterval(this.timer);
          this.timer = null;
          this.ws.addEventListener('open', this.openHandle);
          this.ws.addEventListener('close', this.closeHandle);
          this.ws.addEventListener('message', this.messageHandle);
          this.ws.addEventListener('error', this.errorHandle);
          console.log('重连成功');
        }
      }, 1000);
    },
  }
// ------
}
</script>

<script>
export default {
// ------
     props:{
    //更新信号
    num:{
      type: Number,
      default:0,
    },
  },
    // 监听num
     watch:{
    num(newVal,oldVal) {
      console.log('newValpf :',newVal,'oldValpf :',oldVal)
      this.getInfo();  // 重新发送请求
    },
  },
    // get请求
     methods: {
    getInfo() {
       axios({
          url:'/api/outstanding-kid/kid/getAllUsers',
          method:'get'
        }).then((data)=>{
          // console.log(data.data.data);
          const electric = data.data.data.map(item => item.electric)
          const id = data.data.data.map(item => item.id)
          this.ChartView(electric,id)
        }).catch((error)=>{
          console.dir(error);
        })
    },
//------
}
</script>