Vue.js Vue在渲染后向子级发送更新的道具

在VUE中渲染后如何更新道具

家长

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

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

儿童

<template>...</template>

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

。。。
导出默认值{
道具：['myProps']，
....
}

由于窗口原因，myComponent渲染后会出现消息。。在这种情况下，没有任何更新，只是得到了空数组。。

---

在这种情况下，监听更新道具的最佳方式是什么？

在vue实例中将

myProps

定义为数据属性，然后运行

窗口。在挂载的钩子中运行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}}}),
});

---

除了Boussadjra的答案之外，我还建议使用一个允许跨页面共享状态的

---

但是对于一个简单的数据共享，Boussadjra的答案也会起作用。

如果您想与vanilla的Vue应用程序交互，请使用一种方法

Vue.config.devtools=false；
Vue.config.productionTip=false；
var app=新的Vue({
el:“#应用程序”，
数据：{
柜台:0
},
方法：{
公司（）{
这个计数器+=1；
}
}
})
window.inc=（）=>{
app.inc（）；
}

Vue应用程序：
柜台：
{{counter}}
在vue之外：
股份有限公司

对于简单的情况，他可以使用可观察的apigot Error:[Vue warn]：呈现中的错误：“TypeError:无法读取未定义的属性'updatedPopup'，这意味着

{props:{myProps:this.myProps}

其中看起来像

{props:{myProps:underfined.myProps}

在控制台中，如果不使用

则必须将此

更改为ES6

渲染：h=>h（…）。

为函数

渲染：函数（h）{h（…）}

才能执行此操作