这是全部代码，目前遇到几个问题

export const sliderOptions={
    direction:'horizontal',
    loop:true,
    interval:5000,
    pagination:true
};

<template>
  <transition name="product">
    <div class="product">
      <header class="g-header-container">
        <product-header></product-header>
      </header> 
      <me-scroll>
        <product-slider :slider="products"></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:[]
      };
    },
    props:{
      slider:{
        type:[Object,Array]
      }
    },
    watch: {
      slider(slider){
        this.sliders=slider;
        //console.log(this.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>

import jsonp from 'assets/js/jsonp';
import {jsonpOptions} from './config';

export const getProductDetail=(id) => {
    const url='https://unszacs.m.taobao.com/h5/mtop.taobao.detail.getdetail/6.0/';
    const params={
        api:'mtop.taobao.detail.getdetail',
        ttid:'2017@taobao_h5_6.6.0',
        data:`{"itemNumId":"${id}"}`,
        appkey:12574478,
        dataType:'jsonp',
        type:'jsonp'
    };
    return jsonp(url,params,jsonpOptions).then(res =>{
        //console.log(res);
        if(res.ret[0]==="SUCCESS::调用成功"){
            return res;
        }
        throw new Error('没有成功获取数据');
    }).catch(err => {
        if(err){
            console.log(err);
        }
        //等价于return undefined;
    }).then(data =>{//测试用，可以整体删除
        return new Promise(resolve =>{
            setTimeout(() => {
                resolve(data);
            },1000);
        })
    });
        
}

1、content获取的数据无法绑定在页面上，报错了

2、我想通过父组件传给子组件数据，尝试失败，即slider，图片找不到了

3、

我获取的数据和老师获取的数据不一致，什么原因

4、这个页面所需要的数据老师能不能帮我整理下，我找不到

（价格、“味道不错”之类的评价、logo图标链接、发货地址、商品评价展示（一段话）、商店名称）