Vuejs는 데이터가 로드된 후에만 하위 구성 요소를 마운트함

Vuejs는 데이터가 로드된 후에만 하위 구성 요소를 마운트함

자녀 구성 요소에서 소품으로 데이터를 전달하려고 하지만 이 데이터는 서버에서 로드되기 때문에 로드하는 데 시간이 오래 걸린다.

데이터가 완전히 로드된 경우에만 자식 구성 요소를 마운트하려고 함

SO는 현재 이것을 하고 있다.

상위 구성 요소에서

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

자식 구성 요소의 NOw

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

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

     }

</script>

위의 예에서와 같이 소품으로 전달된 데이터는 항상 어린이 구성요소에 비어 있다.데이터를 수신한 후에만 하위 구성 요소를 장착하는 방법 또는 하위 구성 요소가 최신 데이터 변경되었는지 확인하는 방법

사용하다<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() {
    		var vm =  this;
    		setTimeout(function() {
        	vm.name = "Raut";
          vm.loading = false;
				}, 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>

저스트 바인드key로child-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>

참조URL: https://stackoverflow.com/questions/46731440/vuejs-mount-the-child-components-only-after-data-has-been-loaded