Vue.js 作为道具在子系统中接收的数据为空

我正在从父级调用json，并将结果数据作为道具发送给子级。 但在儿童方面，数据为零

parent.vue

<template>
  <subscriberGraph :propSubData="subData" /> // child component
</template>
<script>
data() {
    return {
      subData: [] // subData declaration
    };
},
methods: {
    async getSubscribers() {
      this.subData = await d3.json("./data/subscribers.json"); // calling json
      console.log("1: ", this.subData); // variable is declared in this file and data is getting displayed here, 
    }
  },
  mounted() {
    this.getSubscribers();
  }
 </script>

//子组件
数据（）{
返回{
子数据：[]//子数据声明
};
},
方法：{
异步getSubscribers（）{
this.subData=wait d3.json（“./data/subscribers.json”）；//调用json
console.log（“1:，this.subData）；//变量在此文件中声明，数据显示在此处，
}
},
安装的（）{
这个.getSubscribers（）；
}

下面是子组件

subscriberGraph.vue

<script>    
export default {
  mounted() {
    console.log("2: ", this.propSubData); // data length: 0 
  }
 props: ["propSubData"]
</script>

 <script>    
     export default {
      methods: {
        drawBarGraph(data) {
          console.log("3: ", data); // working now !!
        }
      },
      mounted() {
        this.drawBarGraph(this.propSubData);
      },
      props: ["propSubData"],
      watch: {
        propSubData: function(newData) {
          this.drawBarGraph(newData);
        }
      }
    </script>

导出默认值{
安装的（）{
console.log（“2:，this.propSubData）；//数据长度：0
}
道具：[“道具子数据”]

---

编辑：子数据已经声明，这就是我在console.log（“1”）旁边的注释中提到的。无论如何，更新上面的代码请检查。

您必须初始化

数据

部分中的

子数据

，才能使用它。由于从请求获得响应需要时间，因此您可以在子组件调用时使用

v-if

条件。这将阻止在响应完成之前呈现子组件设定

<template>
  <subscriberGraph :propSubData="subData" v-if="subData && subData.length>0" /> // child component
</template>
<script>
export default {
  data:()=>{
    return {
      subData:null
    }
  },
  methods: {
    async getSubscribers() {
      this.subData = await d3.json("./data/subscribers.json"); // calling json
      console.log("1: ", this.subData); // variable is declared in this file and data is getting displayed here, 
    }
  },
  mounted() {
    this.getSubscribers();
  }
}

//子组件
导出默认值{
数据：（）=>{
返回{
子数据：空
}
},
方法：{
异步getSubscribers（）{
this.subData=wait d3.json（“./data/subscribers.json”）；//调用json
console.log（“1:，this.subData）；//变量在此文件中声明，数据显示在此处，
}
},
安装的（）{
这个.getSubscribers（）；
}
}

---

添加手表{}解决了这个问题。
subscriberGraph.vue

<script>    
export default {
  mounted() {
    console.log("2: ", this.propSubData); // data length: 0 
  }
 props: ["propSubData"]
</script>

 <script>    
     export default {
      methods: {
        drawBarGraph(data) {
          console.log("3: ", data); // working now !!
        }
      },
      mounted() {
        this.drawBarGraph(this.propSubData);
      },
      props: ["propSubData"],
      watch: {
        propSubData: function(newData) {
          this.drawBarGraph(newData);
        }
      }
    </script>

导出默认值{
方法：{
牵引杆图（数据）{
console.log（“3:，数据）；//正在工作！！
}
},
安装的（）{
this.drargraph（this.propSubData）；
},
道具：[“道具子数据”]，
观察：{
propSubData:函数（newData）{
这是一个。牵引杆图（新数据）；
}
}

---

您需要监视更改，最初您将无法获取数据，因为子组件在装载时尚未接收到数据。稍后，当接收到数据时，watch{}会观察并更新数据，因此数据现在在DrubArgraph（）中可用.

浏览器控制台中是否有错误？收到数据时，子组件数据是否始终相同或更改？@palash浏览器控制台中没有错误。目前，将其视为数据不会更改。首先，我根本没有获得初始数据。我可以保留v-if，但这不是问题所在，我在这里很麻烦。我希望数据在中接收subscriberGraph中的子组件.ie。此外，我已初始化data（）中的“子数据”已经，请检查帖子中更新的代码。如果数据是在

子数据中接收的，那么将其发送到子组件不会有任何问题。数据是否仍然没有接收？是的，在父级中接收的数据，但子级显示为空。在控制台中，第一个子控制台出现，然后带有数据的父级控制台显示d、 可能是因为这是父级中的异步调用，所以它被延迟了。因为添加了
v-if
，所以仅当父级中的数据是数据时，即使存在响应延迟，子组件也将呈现。