Question

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

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

父级组件

function WrappedContent() {
  return <p>I'm wrapped</p>
}

function Wrapper(props) { // <-- here
  return (
    <div>
      <p>Wrapped: </p>
      {props.children} // <-- here
    </div>
  )
};


function App() {
  return (
    <div>
      <Wrapper>
        <WrappedContent />
      </Wrapper>
    </div>
  )
}

子组件

<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

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>

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

2 个答案: