Как гарантировать, что дочерний компонент не всегда перезагружается, когда разные родительские компоненты монтируются в Vuejs

Question

Так же, как на изображении, есть дочерний компонент, который импортируется во все родительские компоненты (Pdetails, Education, Dependents ... и т. Д.),Одна из основных проблем, с которыми я сталкиваюсь, заключается в том, что, когда бы я ни направлялся к какому-либо из этих компонентов, axios отправляет запрос get, который загружает тот же контент в дочерний компонент, и я считаю, что это не очень хорошо для производительности. Есть ли способ сделать это только один раз?

Во-вторых, как я могу делиться данными, возвращенными из API в дочернем компоненте, с родительским компонентом.

Это дочерний компонент

<template>
    <div class="col-lg-3 col-xl-3">
       <div class="card-box text-center">
           <img src="/assets/images/users/user-1.jpg" class="rounded-circle avatar-lg img-thumbnail" alt="profile-image">
           <h4 class="mb-0"> {{  employee.surname }} {{  employee.first_name }} </h4>
           <p class=" mb-2 font-13"><strong><i class="fe-mail text-info"></i> :</strong> <span class="ml-2 ">{{employee.email}}</span></p>
          <p class=" mb-1 font-13"><strong><i class="fe-layers text-danger"></i> :</strong><span class="ml-2">{{employee.age}}</span></p>
        </div>
      </div> <!-- end col-->

</template>

<script>
export default {
    name: 'EmployeeCard',
    data(){
        return{
            employee: {
                job: '', 
                state:'',
                company: ''
            },

        }
    },
    methods:{
        getUser(){
            axios.get('/api/users/'+ this.$route.params.id)
                .then ( response => {
                    this.employee = response.data.data[0].data; 
                })
        }
    },

    mounted(){

        this.getUser();
    }

}
</script>

А ниже приведенКомпонент personalDetail

<template>
    <div>
        <div class="row">
            <EmployeeCard /> <!-- Can I get data from this child component to this component? -->
            <div class="col-lg-9 col-xl-9">
                    <div class="card text-center">
                        <ProfileNav />                    
                        <div class="card-body">

                        </div>
                    </div> <!-- end card-box-->
                </div>
        </div>       
    </div>
</template>

<style scoped>

</style>
<script>
import ProfileNav from "../nav/ProfileNav";
import EmployeeCard from "./EmployeeCard";
export default {
    name: 'PDetails',

    components:{
        ProfileNav, EmployeeCard
    },


    //every component must return something
    data(){
        return {

        }
    },



}
</script>

Я хочу поделиться такими данными, как employee.first_name с карты Employee, на это EmployeeShow

Answer 1

Есть ли способ сделать это только один раз?

Vue хорошо умеет повторно использовать экземпляры компонентов во время обновления. В этом случае, поскольку родительский компонент изменяется, дочерние компоненты в нем также будут переинициализированы. Вы не можете сделать ничего, чтобы этого не произошло.

<keep-alive> можно использовать для поддержания работоспособности каждого родительского экземпляра, что означает, что каждый дочерний элемент будет создан только один раз для каждого родителя. Это лучше, но все же не самое оптимальное.

Я бы посоветовал вам поднять логику выборки данных в родительский компонент, а затем передать данные потомку через подпорки. Таким образом, дочерние компоненты не будут извлекать данные снова и снова при каждой их инициализации.

В качестве альтернативы вы можете использовать хранилище данных (например, Vuex), чтобы данные сохранялись извне от дочернего элемента. компонента, а затем вы можете условно извлечь данные, если вы еще этого не сделали.

Во-вторых, как я могу поделиться данными, возвращенными из API в дочернем компоненте, с родительским компонентом.

Опять же, я бы посоветовал вам поднять логику выборки данных до родителя. Для родительского компонента имеет больше смысла «владеть» данными и затем передавать их дочерним компонентам, которым необходимо их отобразить, а не перевернутым отношениям, где дочерний элемент извлекает данные и затем передает их родителю через события. Это может очень быстро запутаться.

Answer 2

Вы можете передать событие en от дочернего элемента к родительскому.

в дочернем компоненте:

        getUser(){
            axios.get('/api/users/'+ this.$route.params.id)
                .then ( response => {
                    this.employee = response.data.data[0].data; 
                    this.$emit('setEmployee', this.employee);
                }) 
        }

В компоненте personalDetail:

<template>
    <div>
        <div class="row">
            <EmployeeCard @setEmployee="setEmployee"/> <!-- Can I get data from this child component to this component? -->
            <div class="col-lg-9 col-xl-9">
                    <div class="card text-center">
                        <ProfileNav />                    
                        <div class="card-body">

                        </div>
                    </div> <!-- end card-box-->
                </div>
        </div>       
    </div>
</template>

<style scoped>

</style>
<script>
import ProfileNav from "../nav/ProfileNav";
import EmployeeCard from "./EmployeeCard";
export default {
    name: 'PDetails',

    components:{
        ProfileNav, EmployeeCard
    },
    methods: {
      setEmployee(event) {
        this.employee = event;
      }
    }

    //every component must return something
    data(){
        return {
            employee: null
        }
    },



}
</script>

Iподумайте, что Vuex решит проблему загрузки одних и тех же данных дважды.

С помощью vuex вы можете создать магазин, в котором вы будете хранить информацию, которую хотите использовать в любом другом месте вашего приложения.