实现项目中购物车、商品评论功能

学习目标

课程重点内容

一、商品详情页轮播图实现

在商品详情页面中，也要展示对应的轮播图，同时考虑到轮播图是公共的内容，因为在很多的页面中都有可能使用轮播图，所以可以定义成一个公共的组件。

在components下创建Common文件夹，在该文件夹下创建MySwipe.vue，为公共的轮播图组件。

1、获取轮播图数据

由于该轮播图是公共的组件，那么在获取数据的时候，要请求哪个地址呢？

请求的地址，有父组件决定，也就是说哪个组件中使用MySwip.vue,就有哪个哪个组件决定请求的路径。

所以在MySwip.vue中使用props 接收父组件传递过来的具体的请求路径。

具体的实现代码如下：

<script>
export default {
   
  data(){
   
         return{
   
             imgs:[]
         }
     },
    //  使用该组件时，有父组件传递过来要请求的路径。
     props:['url'],
     created(){
   
          this.$axios.get(this.url).then(res=>{
   

           this.imgs=res.data.message;
          //  console.log(this.imgs);
       }).catch(err=>console.log(err))
     }
}
</script>

2、轮播图展示

  <mt-swipe :auto="4000" style="height:500px;">
    <mt-swipe-item v-for="item in imgs" :key="item.id"  >
        <img :src="item.img" alt="" width="100%" >
    </mt-swipe-item>
  </mt-swipe>

3、轮播图组件使用

3.1 注册轮播图组件

在main.js文件中注册轮播图组件

// 注册的轮播图片组件
import MySwipe from '../src/components/Common/MySwipe.vue'
Vue.component(MySwipe.name, MySwipe);

在这里指定了组件的名称，所以在MySwip.vue中在添加一个name属性，指定组件的名称。

export default {
   
  name:'MySwipe', //组件的名字
  data(){
   
         return{
   
             imgs:[]
         }
     },
    //  使用该组件时，有父组件传递过来要请求的路径。
     props:['url'],
     created(){
   
          this.$axios.get(this.url)