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

当父数据源更改时，子组件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>

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

1 个答案: