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

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图标链接、发货地址、商品评价展示（一段话）、商店名称）

迷失的小麦 2020-04-14

源自：实战：Vue 完成分类、搜索页 3-3 项目作业

收起

2回答

好帮手慕夭夭 2020-04-14 17:51:26

同学你好，其他问题，可以参考如下问答：

http://class.imooc.com/course/qadetail/213685

另外，因为这个是第三方接口，即使老师去做，也是一个一个的去找。数据很多，的确要费一点功夫，每一个同学在做这个作业时，都是自己耐心的去找数据，去尝试的，最终完成的。这个问题不像一道难题，无论怎么思考都想不到方法。只要自己静下心一点一点的整理，是可以做出来的。同学现在已经学到最后一个阶段了，如果还像小白入门那样每一步都是老师为你做好，那么你是没有什么成长的。哪怕使用的数据有一些不对，也比让别人帮你做好强。工作中，也会遇到使用第三方接口的问题，难道那个时候同学要让同事或者领导帮你整理吗？如果真是这样，公司会认为你能力很差，无法胜任这份工作的。

老师说的话有一些沉重了，但是也是为了同学好，毕竟最近一个阶段结束后，可能要面临找工作了。如果这个时候，还不去提升自己独立思考与解决问题的能力，那么以后的工作就真的是寸步难听了。希望同学加油哦，相信自己是可以的！

祝学习愉快 ~

收起回答

提问者迷失的小麦 #1

我想知道只从index中获取一次数据，然后子组件调用，也就是我的代码哪里错了老师之前说是使用prop，可是出错了

2020-04-14 19:03:33
好帮手慕夭夭回复提问者迷失的小麦 #2

出错的代码，老师已经调整好了哦。同学点击上面的问题链接即可查看到相关的修改方案，建议同学先修改一下，如果修改之后还有问题，可以继续在问答区提问哦。

2020-04-14 19:45:22