Vue父组件道具未传递给子组件

Question

我想使用父组件中的axios从数据库获取新数据，并将该数据传递给子组件。 但是父组件传递旧数据（尚未使用axios更新）。

我认为这不是axios的问题。 因为我可以看到在父组件中使用axios更新了新数据。 但是父组件不会将其传递给子组件。

父组件

<template>
<div>
    <p>{{itemData}}</p>
    <child v-bind:propsData="itemData"/>
</div>
</template>

<script>

import Child from './Child.vue'

export default {

  components: {
    Child,
  },

  data(){
    return {
      itemData: {
          title : 'OLD TITLE'
      }
    }
  },

  async created() {
    this.itemData = await this.$axios.get("/rest/getItem/");
    this.itemData = this.itemData.data;
  },

}
</script>

子组件

<template>
    <div class="child">
        <li>{{title}}</li>
    </div>
</template>

<script>
export default {
    props: {
      propsData: {
        type: Object
      }
    },

    data(){
        return{
            title: this.propsData.title
        }
    }, 
}
</script>

实际结果

{"title" : "NEW TITLE"}

OLD TITLE

预期成绩

{"title" : "NEW TITLE"}

NEW TITLE

Answer 1

使用计算代替

<script>
export default {
    props: {
      propsData: {
        type: Object
      }
    },

    computed(){
        title(){
          return this.$props.propsData.title
        }
    }, 
}
</script>

Answer 2

您可以看到其中存在一些问题-但它们只是语法上的。 尝试使用其他大小写（并等待文本更改-3秒）：

 Vue.component('my-component', { props: ['propsData'], template: '<p>{{ propsData.title }}</p>' }) new Vue({ el: "#app", data: { itemData: { title: 'OLD TITLE' } }, mounted() { const self = this // simulating an async call: setTimeout(function() { self.itemData.title = 'NEW TITLE' }, 3000) } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <my-component v-bind:props-data="itemData" /> </div>