Vue.js 从Vue js中的父级更新子组件

父组件：

<template> 
  <div>
<child-component :data="parentData"></child-component>
  </div>
</template>
<script>
export default {
data() {
return {
parentData: [{info: '123'}, {info: '456'}]
    }
   },methods: {
init() {
  this.parentData = [{info: 'abc'}, {info: 'def'}];
  }
},
mounted() {
this.init();
}
}
</script>

<template>
<div>
<span v-for="item in parentData">
{{ item.info }}
</span>
</div>
</template>
<script>
export default {
props: ["parentData"]
}
</script>

导出默认值{
数据（）{
返回{
父数据：[{info:'123'}，{info:'456'}]
}
}方法：{
init（）{
this.parentData=[{info:'abc'}，{info:'def'}]；
}
},
安装的（）{
this.init（）；
}
}

子组件：

<template> 
  <div>
<child-component :data="parentData"></child-component>
  </div>
</template>
<script>
export default {
data() {
return {
parentData: [{info: '123'}, {info: '456'}]
    }
   },methods: {
init() {
  this.parentData = [{info: 'abc'}, {info: 'def'}];
  }
},
mounted() {
this.init();
}
}
</script>

<template>
<div>
<span v-for="item in parentData">
{{ item.info }}
</span>
</div>
</template>
<script>
export default {
props: ["parentData"]
}
</script>

{{item.info}
导出默认值{
道具：[“parentData”]
}

最初我传递一些默认数据，它是从父对象到子对象的get渲染

但在我通过调用方法（我需要用api绕过它）更新parentData的数据之后，子组件并没有得到更新

任何人都可以帮助我如何更新子组件中的道具，方法是在呈现页面后从父组件传递道具的更新数据。

---

提前感谢。

当父数据源更改时，子组件道具应该是被动的。下面是一个每秒更新子组件的示例

Vue.component（'child-component'{
模板：`
{{item.info}
`,
道具：['parentData']
})
Vue.component（'父组件'{
模板：``，
数据（）{
返回{
父数据：[{info:'123'}，{info:'456'}]
}
},
挂载（）{
设置间隔（（）=>{
此.parentData=[
{
信息：Math.random（）.toString（36.slice（-3）
},
{
信息：Math.random（）.toString（36.slice（-3）
}
]
}, 1000)
}
})
新Vue({
el:“#应用程序”，
模板：“”
})

你是说

？您还需要分享如何更新

parentData

，以便我们知道它为什么不是反应式的。我通过在mounted的方法中调用init（）来更新parentData。在顶部添加了此代码。您是否意识到应该

？您的子组件有一个prop

parentData

而不是data。是的，谢谢您在这里添加了我的错误。但在代码中，我以同样的方式添加了。由于这一点，在最初它是工作的，但加载后发送的数据没有得到更新。你可以为此共享plunkr链接吗？