我现在是在子组件分别获取数据，如何写可以只在index中获取一次，别的组件调用

<template>
  <transition name="product">
    <div class="product">
      <header class="g-header-container">
        <product-header></product-header>
      </header> 
      <me-scroll>
        <product-slider></product-slider>
        <product-content></product-content>
      </me-scroll> 
    </div>
  </transition>
</template>

<script>
import {getProductDetail} from 'api/product';
import ProductHeader from './header';
import MeScroll from 'base/scroll';
import ProductSlider from './slider';
import ProductContent from './content';

export default {
  name: 'Product',
  components:{
    ProductHeader,
    MeScroll,
    ProductSlider,
    ProductContent
  },
  data(){
    return {
      products:{}
    };
  },
  created(){
    getProductDetail(this.$route.params.id).then(data => {
      //console.log(data.data);
      this.products=data.data;
    });
  }
};
</script>

<style lang="scss" scoped>
@import "~assets/scss/mixins";
.product {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: $product-z-index;
  width: 100%;
  height: 100%;
  background-color: $bgc-theme;
}
.product-enter-active,
.product-leave-active {    
    transition: all 0.3s;
}

.product-enter,
.product-leave-to {
  transform: translate3d(100%, 0, 0);
}
.product-enter-to{
  transform: translate3d(0, 0, 0);
}
</style>

<template>  
    <div class="slider-wrapper">  
      <me-loading :text="'加载中'" v-if="!sliders.length"></me-loading>
      <me-slider :direction="direction" :loop="loop" :interval="interval" :pagination="pagination" :datas="sliders" v-else>
        <swiper-slide v-for="(item,index) in sliders" :key="index">
          <a href="#" class="slider-link">
            <img :src="item" alt="pic" class="slider-img">
          </a>
        </swiper-slide>
      </me-slider>
    </div>  
</template>

<script>
  import MeSlider from 'base/slider';
  import {swiperSlide} from 'vue-awesome-swiper';
  import {getProductDetail} from 'api/product';
  import {sliderOptions} from './config';
  import {getHomeSlider} from 'api/home';
  import MeLoading from 'base/loading';

  export default {
    name: 'HomeSlider',
    components:{
        MeSlider,
        MeLoading,
        swiperSlide
    },
    data(){
      return{
        direction:sliderOptions.direction,
        loop:sliderOptions.loop,
        interval:sliderOptions.interval,
        pagination:sliderOptions.pagination,
        sliders:[]
      };
    },
    created(){
      this.getSliders();
    },
    methods:{
      getSliders(){
        getProductDetail(this.$route.params.id).then(data => {
            //console.log(data.data);
            this.sliders=data.data.item.images;
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .slider-wrapper{
    height: 300px;
  }
  .slider-link{
    display: block;
  }
  .slider-link,.slider-img{
    width: 100%;
    height: 100%;
  }
</style>

<template>
    <div>
        <div>
            <p>￥{{content.seller.allItemCount}}</p>
            <p>{{content.seller.newItemCount}}件已售</p>
        </div>
    </div>
  </template>

<script>
import {getProductDetail} from 'api/product';
export default {
    data(){
        return {
            content:{}
        };
    },
    created(){
      this.getContent();
    },
    methods:{
      getContent(){
        getProductDetail(this.$route.params.id).then(data => {
            console.log(data.data);
            this.content=data.data;
        });
      }
    }
};
</script>

<style lang="scss" scoped>

</style>

<template>      
    <me-navbar class="header">
        <i class="iconfont" slot="left" @click="goBack">&#xe60d;</i>
        <p slot="center">商品详情</p>
        <i class="iconfont" slot="right">&#xe501;</i>
    </me-navbar> 
</template>

  <script>
    import MeNavbar from "base/navbar";
  
    export default {
      name: 'ProductHeader',
      components:{
          MeNavbar
      },
      data(){
        return{
          
        };
      },
      methods:{
        goBack(){
            this.$router.back();
        }
      }
    };
  </script>

<style lang="scss" scoped>
    @import "~assets/scss/mixins";
    .header{
        background-color: $header-bgc-translucent;
        color: white;
        p{
            text-align: center;
        }
    }
</style>