vue中异步更新的数据同步传给子组件

• 需求：websocket接收的数据要同步更新到子组件中
• 问题：websocket接收方法写在父组件，message要展示在子组件，使用prop传message给子组件，子组件接收不到数据
• 原因：websocket的回调方法是异步的，如果只使用prop传值会导致，在message还没有被重新赋值前就被使用，自然获取不到后来更新的数据
• 解决方案：
  • 方案一：使用computed计算属性

  computed:{//在子组件中声明计算属性messageList
        messageList:function () {  //messageList的值随着msgList的值变化而变化
                return this.msgList  
        }
  }
  

  • 方案二：使用bus进行组件通信

  //1.main.js中声明全局对象Bus
  Vue.prototype.Bus = new Vue()
  //2.websocket的接收数据的回调函数中，调用方法和数据
  initWebsocket(){
     ...//建立连接
     ws.onmessage = function (evt) {
         that.Bus.$emit('updateMessage',that.messageList)
     ｝
  ｝
  //3.子组件的mounted中接收方法和数据
  methods:{
     updateMessage(messageList){
         this.messageList = messageList
     },
  },
  mounted() {
     this.Bus.$on('updateMessage',messageList => this.updateMessage(messageList))
  }