vue.js - Vue 在渲染后将更新后的 props 发送给子进程

Question

VUE渲染后如何更新PROPS？

家长

const myProps = [];
window.onmessage = function(data) {
  myProps.push(data)
}

new Vue({
  el: el || '',
  render: h => h(myComponent, {props:{myProps: myProps}}),
});

child

<template>...</template>

export default {
  props: ['myProps'],
  ....
}

由于窗口消息在 myComponent 渲染后稍后出现..在这种情况下没有任何更新，只是得到空数组.. 在这种情况下，监听更新属性的最佳方式是什么？

Answer 1

将myProps定义为vue实例中的数据属性，然后在挂载的钩子(Hook)中运行window.onmessage:

new Vue({
  el: el || '',
  data(){
    return{
      myProps : []
   } 
 },
  mounted(){
   window.onmessage = (data)=> {
       this.myProps.push(data)
   }
 },
  render: function(h){return h(myComponent, {props:{myProps: this.myProps}}}),
});