vue中：在 子组件的created、mounted中获取不到props中的值data(data为对象或者数据太大时取不到)
出现这种情况的原因 ：因为父组件中的要就要传递的props属性 是通过发生ajax请求回来的, 请求的这个过程是需要时间的，但是子组件的渲染要快于ajax请求过程，所以此时 created 、mounted这样的只会执行一次的生命周期钩子，已经执行了，但是props还没有流进来（子组件），所以只能拿到默认值。
解决方法 ：
①、watch处理
监听 Data 的值，当它由空转变时就会触发，这时候就能取到了，拿到值后要做的处理方法也需要在 watch 里面执行
export default {
props: ['Data'],
data(){
return {
cData: []
}
},
watch: {
//正确给 Data 赋值的 方法
Data: function(newVal,oldVal){
this.cData = newVal; //newVal即是chartData
newVal && this.draw(); //newVal存在的话执行draw函数
}
},
methods: {
draw(){
//执行其他逻辑
}
},
mounted() {
//在created、mounted这样的生命周期, 给 this.Data赋值会失败,错误赋值方法
}
}
②、加上 v-if 来判断数据是否加载完成了，加载完了再渲染
A、flag默认值为false, 在父组件异步请求数据成功后flag变为true: <children v-if="flag" :list="list"></children>
// 成功获取数据后 flag设置成true
homeResource.getConditionData().then((res) => {
this.flag = true
if (res.data.status === 0) {
console.log('条件', res.data.data)
this.list = res.data.data
}
})
B、 <children v-if="list.length" :list="list"></children>
③、setTimeout来做延迟，但这样的方法不准确，应该视情况使用（不推荐）
************
类似问题 ：vue在created异步请求数据，通过v-for渲染；在mounted中获取不到数据和Dom的解决方案
// template
<div
class="scheme-tab"
v-for="(tab,index) in tabs"
:key="tab.id"
>
// JS
async created() {
this.tabs = await this.fetchSolutionTypes();
console.log(JSON.stringify(this.tabs)); // 有数据
},
mounted() {
console.log(JSON.stringify(this.tabs)); // 没有数据
console.log(document.getElementsByClassName("scheme-tab")); // 没有数据
}
目的：在created中异步获取到数据后，在template中通过v-for渲染；然后在mounted中获取到循环渲染的Dom节点。
但是在mounted中都获取不到；
在mounted当中使用 this.$nextTick 也不好用；
使用setTimeout，设置延时可以，但是在网速不好的情况下还是有问题。所以不推荐；
解决方法 ：
在watch当中监听tabs数组，然后在watch函数中，通过nextTick获取Dom节点；
watch: {
tabs: function (val) {
console.log(val); // 有数据
this.$nextTick(() => {
let curDom = document.getElementsByClassName("scheme-tab")[0]; // 有数据
});
}
},
async created() {
this.tabs = await this.fetchSolutionTypes();
console.log(JSON.stringify(this.tabs)); // 有数据
},
mounted() {
// console.log(JSON.stringify(this.tabs));
// console.log(document.getElementsByClassName("scheme-tab"));
