Vuejs只有在加载数据后才加载子组件

Question

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

我现在想只安装儿童组件时，数据被完全加载

所以目前正在做这

父组件

<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> 

从上面的例子中，数据传递为p在子组件上，rops总是空的。如何在收到数据后才安装子组件，或者如何确保子组件获取更改的最新数据。

Answer 1

使用<template v-if="childDataLoaded">，并获得数据这样

<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> 

后装入您的子组件以下是更新子组件尼斯和清洁的方式。

var child = Vue.extend({ 
 
    template: "<div>Child Component : {{name}} <div v-if='loading'>Loading...</div></div>", 
 
    props: ['name','loading'] 
 
}); 
 
var app = new Vue({ 
 
    el: "#vue-instance", 
 
    data: { 
 
     name: "Niklesh", 
 
     loading: true 
 
    }, 
 
    mounted() { 
 
    \t \t var vm = this; 
 
    \t \t setTimeout(function() { 
 
     \t vm.name = "Raut"; 
 
      vm.loading = false; 
 
\t \t \t \t }, 1000); 
 
    }, 
 
    components: { 
 
     child 
 
    }, 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.1/vue.js"></script> 
 
<div id="vue-instance"> 
 
    <child :name="name" :loading="loading"></child> 
 
</div>