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

Question

父组件：

<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的数据之后，子组件没有得到更新。

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

Answer 1

当父数据源更改时，子组件道具应该是反应性的。这是一个每秒更新子组件的示例。

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>