laravel - 如何确保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>

下面是个人详细信息组件

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

我想将 EmployeeCard 中的 employee.first_name 等数据共享到此 EmployeeShow

Answer 1

您可以通过从子级向父级发出 en 事件来实现。

在子组件中:

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

在个人详细信息组件中:

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

我认为Vuex解决两次加载相同数据的问题。

使用 vuex，您可以创建一个商店，在其中保存您想要在应用程序中其他任何地方使用的信息。