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

Posted 2023-02-22

【中文标题】Vue父组件道具没有传递给子组件

【英文标题】：Vue parent component props are not passing to child component

【发布时间】：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

对不起，我弄错了。那不是问题。我只是打错了。我现在编辑了。

【参考方案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>