在Vue js中从父级更新子组件答案

【问题标题】：Update child component from parent in Vue js在Vue js中从父级更新子组件
【发布时间】：2019-05-02 05:37:31
【问题描述】：

父组件：

<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>

最初我传递一些默认数据，它是从父级渲染到子级。

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

任何人都可以帮助我如何在渲染页面后通过从父组件传递更新的数据来更新子组件中的道具。提前致谢。

【问题讨论】：

你的意思是<child-component :parent-data="parentData">？您还需要分享您是如何更新 parentData 的，这样我们就知道它为什么没有反应。
我正在通过在mounted方法中调用init()来更新parentData。在顶部添加了这段代码。
你意识到你应该<child-component :parent-data="parentData">吗？您的子组件有一个道具 parentData 而不是数据。
是的，感谢我在此处添加的错误。但是在我以相同方式添加的代码中。因此，最初它可以正常工作，但加载后发送数据没有得到更新。
你能分享这个 plunkr 链接吗？

标签： vue.js

【解决方案1】：

当父数据源发生变化时，子组件 props 应该是响应式的。这是一个每秒更新子组件的示例。

Vue.component('child-component', {
  template:`<div>
<span v-for="item in parentData">
{{ item.info }}
</span>
</div>`,
  props: ['parentData']
})

Vue.component('parent-component', {
  template:`<child-component :parent-data="parentData"></child-component>`,
  data () { 
    return {
      parentData: [{info: '123'}, {info: '456'}]
    }
  },
  mounted () {
    setInterval(() => {
      this.parentData = [
        {
          info: Math.random().toString(36).slice(-3)
        },
        {
          info: Math.random().toString(36).slice(-3)
        }
      ]
    }, 1000)
  }
})

new Vue({
  el: '#app',
  template: '<parent-component></parent-component>'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>

【讨论】：