Javascript Vuejs仅在加载数据后才装载子组件

我试图实现的是在我的子组件中作为道具传递数据，但是这些数据是从服务器加载的，所以加载需要一段时间

我现在只想在数据完全加载时挂载子组件

所以我现在正在做这件事

在父组件中

<template>
  <child-cmp :value="childdata"></child-cmp>
</template>

<script>
  export default{
    data(){
       childdata : [];
     },

     methods:{
      fetchINitData(){
        //fetch from server then
         this.childdata = res.data.items;
         console.log(res.data.items) //has some values

       }

     }


   components:{
     childcmp
    },

   mounted(){
     this.fetchINitData();


     }
    }
 </script>

<script>
export default{
   props:["value];

    mounted(){
      console.log(this.value) //this is always empty
     } 

     }

</script>

导出默认值{
数据（）{
儿童数据：[]；
},
方法：{
fetchINitData（）{
//然后从服务器获取
this.childdata=res.data.items；
console.log（res.data.items）//有一些值
}
}
组成部分：{
孩子
},
安装的（）{
this.fetchINitData（）；
}
}

现在在我的子组件中

<template>
  <child-cmp :value="childdata"></child-cmp>
</template>

<script>
  export default{
    data(){
       childdata : [];
     },

     methods:{
      fetchINitData(){
        //fetch from server then
         this.childdata = res.data.items;
         console.log(res.data.items) //has some values

       }

     }


   components:{
     childcmp
    },

   mounted(){
     this.fetchINitData();


     }
    }
 </script>

<script>
export default{
   props:["value];

    mounted(){
      console.log(this.value) //this is always empty
     } 

     }

</script>

导出默认值{
道具：[“价值]；
安装的（）{
console.log（this.value）//始终为空
} 
}

从上面的示例来看，作为道具传递的数据在子组件上总是空的。如何仅在收到数据后装载子组件，或者如何确保子组件获得最新的更改数据。

使用

，并在获得这样的数据后加载子组件

<template>
  <template v-if="childDataLoaded">
    <child-cmp :value="childdata"></child-cmp>
  </template>
</template>

<script>
  export default{
    data(){
        childDataLoaded: false,
        childdata : [];
     },
     methods:{
      fetchINitData(){
        //fetch from server then
         this.childdata = res.data.items;
         this.childDataLoaded = true;
         console.log(res.data.items) //has some values
       }
     }
   components:{
     childcmp
    },
   mounted(){
     this.fetchINitData();
     }
    }
 </script>

导出默认值{
数据（）{
childDataLoaded:false，
儿童数据：[]；
},
方法：{
fetchINitData（）{
//然后从服务器获取
this.childdata=res.data.items；
this.childDataLoaded=true；
console.log（res.data.items）//有一些值
}
}
组成部分：{
孩子
},
安装的（）{
this.fetchINitData（）；
}
}

下面是一种更新子组件的好方法

var child=Vue.extend({
模板：“子组件：{{name}}正在加载…”，
道具：['name'，'loading']
});
var app=新的Vue({
el:#vue实例“，
数据：{
姓名：“Niklesh”，
加载：正确
},
安装的（）{
var vm=这个；
setTimeout（函数（）{
vm.name=“Raut”；
vm.loading=false；
}, 1000);
},
组成部分：{
小孩
},
})

---

只需将

键

绑定到

子cmp

即可获得反应性输出。这是

Vue js

中最简单的反应性方法

<template>
  <child-cmp :key="childdata" :value="childdata"></child-cmp>
</template>

<script>
  export default{
    data(){
       childdata : [];
     },

     methods:{
      fetchINitData(){
        //fetch from server then
         this.childdata = res.data.items;
         console.log(res.data.items) //has some values
       }
     }

   components:{
     childcmp
    },

   mounted(){
     this.fetchINitData();
     }
    }
 </script>

导出默认值{
数据（）{
儿童数据：[]；
},
方法：{
fetchINitData（）{
//然后从服务器获取
this.childdata=res.data.items；
console.log（res.data.items）//有一些值
}
}
组成部分：{
孩子
},
安装的（）{
this.fetchINitData（）；
}
}

如何使用子组件中的数据？

mounted（）

仅在组件最初加载时被调用。您必须加载数据，还是在服务器调用完成后可以更新数据。@TimHutchison我只是将其分配给表单输入，使其选择下拉列表您可以将空列表绑定到下拉列表，然后在列表更新下拉列表将自动更新。我稍后将尝试添加一个示例。可以，但可能不是最好的方法，这取决于您如何使用传递到子组件的数据。也可以直接在组件上工作，在我的情况下，嵌套子组件需要等待状态加载，然后组件才能接收动态值。

我不知道，但我认为使用setTimeout是不好的方法。@htoniv：这是一个例子，您可以在本地使用任何ajax。这说明了在一段时间后加载组件，并且一段时间后将是任何ajax形式的http请求。我非常喜欢此解决方案。将其付诸实践，看看是否有任何负面影响效果会出现。很好，但我认为建议使用字符串作为组件键。因此，最好在列表中使用数组的长度或哈希（用于数据完整性）