组件之间传递数据失败

我是在slider组件中获取的页面数据。然后我想传递数据到另外一个子组件detail中。

传递路径slider=>index(父组件)=>detail。但是将数据从index传递给detail时失败了。

slider.js

<template>
  <div class="slider-wrapper">
    <MeLoading v-if="!sliders.length"></MeLoading>
    <me-slider :direction="direction" :loop="loop" :interval="interval" :pagination="pagination" :data="sliders" v-else>
        <swiper-slide v-for="(item,index) in sliders" v-bind:key="index">
            <a href="JavaScript:;" class="slider-link">
                <img :src="item" class="slider-img">
            </a>
        </swiper-slide>
    </me-slider>
  </div>
</template>

<script>
import MeSlider from 'base/slider';
import MeLoading from 'base/loading';
import { swiper,swiperSlide } from "vue-awesome-swiper";
import { getProductDetail } from "api/product.js";

export default {
  name:'productSlider',
  components: {
    MeSlider,
    MeLoading,
    swiper,
    swiperSlide
  },
  data() {
    return {
      direction: 'horizontal',
      loop: true,
      interval: 0,
      pagination: true,
      sliders: []
    }
  },
  props: {
    productId: {
      type: [String,Number],
      default:''
    }
  },
  created() {
    console.log('幻灯片组件接收商品ID成功'+this.productId);
    this.getDetail(this.productId);
  },
  methods: {
    getDetail(id) {
      getProductDetail(id).then(data => {
        console.log(data);
        this.sliders = data.slider;
        this.$emit('loaded', data);//将数据传递给父组件
      })
    }
  }
}
</script>

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

index.js

<template>
    <div class="product">
        <header class="g-header-container">
            <product-header/>
        </header>
        <me-scroll>
            <product-slider :productId="productId" @loaded="getDetail"></product-slider>
            <product-detail :productData="productData"></product-detail>
        </me-scroll>
    </div>
</template>
<script>
import productHeader from './header';
import productSlider from './slider';
import productDetail from './detail';
import MeScroll from 'base/scroll';

export default {
    name: 'Product',
    components: {
        productHeader,
        productSlider,
        productDetail,
        MeScroll
    },
    data() {
        return {
            productId: this.$route.params.id,
            productData: null
        }
    },
    methods: {
        getDetail(data) {//接收子组件传递过来的数据
            console.log('父组件接收数据成功');
            console.log(data);
            this.productData = data;
        }
    },
    created() {
        console.log('接收商品id成功:'+this.$route.params.id);
    }
}
</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;
    }
</style>

detail.js

<template>
  <div class="detail">
    <div class="detail-price-count">
      <p class="detail-price"><span>￥</span></p>
      <p class="detail-count"></p>
    </div>
    <div class="detail-info">
      <h2 class="detail-title"></h2>
      <div class="detail-infoBox">
        <span class="detail-express"></span>
        <span class="detail-monthCount"></span>
        <span class="detail-site"></span>
      </div>
    </div>
    <div class="detail-comment">
      <h4 class="detail-commentTitle"></h4>
      <div class="detail-keyword">
        <a class="detail"></a>
      </div>
      <div class="detail-userInfo">
        <img class="detail-userIcon" src=""><span class="detail-userName"></span>
      </div>
      <p class="detail-userComment"></p>
      <p class="detail-userTimeType">
        <span class="detail-userTime"></span>
        <span class="detail-userType"></span>
      </p>
    </div>
    <div class="detail-shopInfo">
      <img src="" alt="" class="detail-shopIcon">
      <h4 class="detail-shopTitle"></h4>
      <i class="detail-shopMark"></i>
    </div>
    <p class="detail-service">
      <span class="detail-describe"></span>
      <span class="detail-sellerService"></span>
      <span class="detail-logistics"></span>
    </p>
  </div>
</template>

<script>
export default {
  name:'productDetail',
  props: {
    productData: {
      type:[Array, Object]
    }
  },
  mounted() {
    console.log('detail组件获取到数据!');
    console.log(this.productData);
  }
}
</script>

<style lang="scss" scoped>

</style>

使用$emit将数据从slider传递给index.js成功。但是从index传递给detail又失败了。是因为生命周期函数错误还是什么？获取数据在index获取好还是在slider中获取好啊？