Vue父组件道具没有传递给子组件答案

【问题标题】：Vue parent component props are not passing to child componentVue父组件道具没有传递给子组件
【发布时间】：2019-11-12 08:16:37
【问题描述】：

我想在父组件中使用 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

【问题讨论】：

您不是将 lectureData 传递给孩子，而是 propsData
对不起，我弄错了。那不是问题。我只是打错了。我现在编辑了。

标签： javascript vue.js axios frontend vue-component

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

改用计算值

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

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

【讨论】：